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. telegraf 学习一 基本安装

    telegraf 是influxdata 开发的一个插件驱动的服务器代理,可以方便的用来收集以及报告系统的metrics 我使用mac 系统,测试安装使用了brew 安装 下载地址 说明官方也提供了m ...

  2. canvas的基本使用

    一.定义 canvas最早是由Apple引入Webkit的,<canvas>元素包含于HTML5中 HTML5的canvas元素使用JavaScript在网页上绘制图像,画布是一个矩形区域 ...

  3. 洛谷 P1508 Likecloud-吃、吃、吃 题解

    P1508 Likecloud-吃.吃.吃 题目背景 问世间,青春期为何物? 答曰:"甲亢,甲亢,再甲亢:挨饿,挨饿,再挨饿!" 题目描述 正处在某一特定时期之中的李大水牛由于消化 ...

  4. 虚拟变量陷阱(Dummy Variable Trap)

    虚拟变量陷阱(Dummy Variable Trap):指当原特征有m个类别时,如果将其转换成m个虚拟变量,就会导致变量间出现完全共线性的情况. 假设我们有一个特征“性别”,包含男性和女性两个类别,如 ...

  5. tf.matmul()报错expected scalar type Float but found Double

    tf.matmul(a,b)将矩阵a乘以矩阵b,生成a * b,这里的a,b要有相同的数据类型,否则会因为数据类型不匹配而出错. 如果出错,请看是前后分别是什么类型的,然后把数据类型进行转换.

  6. 关于 Javascript 学习,有哪些好的博客或者网站推荐?

    知乎社区:http://www.zhihu.com/question/19651401 Mozilla开发者网络社区:https://developer.mozilla.org/zh-CN/ moze ...

  7. #C++初学记录(typedef和define)

    typedef的用法 typedef关键字可以用于给数据类型定义一个别名,即可以给long long 定义成ll,也可以给结构体定义,当你定义了一个结构体时,每次创建一个结构体都要使用struct+结 ...

  8. server2003 IIS6.0 网站不可用

    事件 ID ( 487 )的描述(在资源( Zend Optimizer )中)无法找到.本地计算机可能没有必要的注册信息或消息 DLL 文件来从远程计算机显示消息.您可能可以使用 /AUXSOURC ...

  9. clion 查看代码 多次查看后如何一步一步回退到最初查看的代码位置

    在settings->keymap里面搜索navigate,然后就有蓝色字体的Back.Forward,这个两个有自己对应的快捷键,但是你有可能不能使用这个功能,因为在不同的操作系统里面,有可能 ...

  10. 查询优化 In Oracle

    Cost-based query transformation in Oracle Enhanced Subquery Optimizations in Oracle Cost-based query ...