border 可应用于几乎所有有形的html元素,而outline 是针对链接、表单控件和ImageMap等元素设计

outline的效果将随元素的 focus 而自动出现,相应的随 blur 而自动消失。这些都是浏览器的默认行为,无需JavaScript配合CSS来控制。outline 不会像border那样影响元素的尺寸或者位置。

使用input:focus{outline:none;},可以达到“输入框”获得焦点时边框不变蓝的效果。这个效果也可以使用在button上,button:focus{outline:none;}。

但是在Firefox下,对于类型为button的元素,即使设置outline,也还是会出现虚线。可以使用一个Firefox的私有伪元素:

button:-moz-focus-inner{border:0;},

特别注意的是-moz-focus-inner设置的不是outline,而是设置border。

input获得焦点时,如何让外边框不变蓝的更多相关文章

  1. 去掉chrome浏览器中input获得焦点时的带颜色边框呢

    可以设置表单控件的outline属性为none值, 来去掉Chrome浏览器中输入框以及其它表单控件获得焦点时的带颜色边框. css代码如下: input{outline:none}

  2. 去除input边框 input去除边框 去除input获取焦点时的蓝色外边框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. :input获得焦点时被弹出键盘挡住解决办法

    这个是移动端非常常见的bug了,这里说下综合的解决办法,因为有时候你的办法就是会失效.. 上代码 /*input框调起输入法盖住输入问题*/$('input[type="text" ...

  4. 【小程序】---- input获得焦点时placeholder重影BUG

    问题小程序的input组件有个自身的bug,即当输入框获取焦点时placeholder内容会出现重影现象. 解决思路原理:将placeholder内容单独写在另外的标签里,控制其显示隐藏.操作:将代表 ...

  5. input获得焦点时改变placeholder文本的样式

    HTML: <input type="text" placeholder="sample text"/> CSS: input::-webkit-i ...

  6. webapp之登录页面当input获得焦点时,顶部版权文本被顶上去 的解决方法

    如上图,顶部版权是用绝对定位写的,被顶上去了,解决方法是判断屏幕大小,改变footer的定位方式: <script> var oHeight = $(document).height(); ...

  7. (谷歌浏览器等)解决css中点击input输入框时出现外边框方法【outline:medium;】

    问题:在使用谷歌浏览器,360浏览器时,点击input输入框会出现带颜色的外边框,如下图所示:

  8. 去掉chrome、safari input或textarea在得到焦点时出现黄色边框的方法

    1.去掉chrome.safari input或textarea在得到焦点时出现黄色边框的方法 input{ outline:0;} 2.去掉chrome.safari textarea右下角可拖动鼠 ...

  9. 如何去除表单元素获得焦点时的外边框:outline (轮廓)

    我们在做制作表单页面时,经常会需要消除表单元素带来的边框,这时候我们需要用到两个属性: 1.表单元素未激活状态下的边框,不实现边框: border:none; 2.表单元素获得焦点时的轮廓,隐藏轮廓: ...

随机推荐

  1. gitbase 集成sqler 进行git 代码分析

      gitbase 是一个方便的git sql 查询引擎,sqler 是一个很不错的sql 转rest api工具,以下是一个简单的集成测试 项目使用docker-compose 运行 环境准备 do ...

  2. gj的交换机在升级了ios之后最新数据不刷新,

    下午2点开始升级5点结束,之后监控项获取不到最新数据,显示网络接口一直是down的状态,但是登上设备之后显示的是正常up状态, 怀疑是自动发现规则的问题,但是查看之后都是1个小时,应该不会, 这时候诡 ...

  3. 文字环绕和两栏自适应以及区域滚动插件iscroll.js

    一.文字环绕效果:使用浮动 <div class="boxleft"></div> 我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字 ...

  4. 市场细分(Market Segmentation)

    什么是市场细分? 市场细分其实就是把拥有共同特征的人分在一起.这些共同特征可以是:喜欢喝某个牌子的红酒,飞机总是做头等舱,习惯用windows系统等等. 市场细分有什么用? 1,不同细分市场的需求存在 ...

  5. sublime text 3 安装、添加命令行启动、汉化、注册码

    1. 安装sublime: 下载:http://www.sublimetext.com/3 添加命令行启动:设置环境变量->计算机->右键属性->高级系统设置->环境变量-&g ...

  6. 第12组 Beta冲刺(2/5)

    Header 队名:To Be Done 组长博客 作业博客 团队项目进行情况 燃尽图(组内共享) 由于这两天在修严重Bug,故项目没有新的进展,燃尽图没有变化 展示Git当日代码/文档签入记录(组内 ...

  7. mysql substring()函数,字符串分割

    mysql> select * from test; +----+------------+-------+-----------+ | id | name | score | subject ...

  8. [内网渗透]Cobaltstrike指令大全

    0x01 安装 Cobaltstrike是需要java环境才能运行的 linux下终端运行: sudo apt-get install openjdk-8-jdk windows下: 百度一堆配置JA ...

  9. mysql的动态表名

    create EVENT createMtpulseTable ON SCHEDULE every 1 month STARTS CURRENT_TIMESTAMP DO CALL pro_creat ...

  10. 卸载nginx之后重新安装

    Ubuntu 14.04上卸载nginx之后重新安装没有重新生成配置文件的解决方法 在配置nginx做实验时配置错了,导致访问不了虚拟主机.一狠心把nginx的配置文件目录(/etc/nginx)都删 ...