CSS禁止解决谷歌Chrome浏览器中点击input输入框边框变色

2016-08-18 08:24:34 CSS解决谷歌浏览器Chrome中鼠标点击输入框时(输入内容时)输入框边框变橘黄色或蓝色 其它颜色。

CSS解决谷歌浏览器Chrome中鼠标点击输入框时(输入内容时)输入框边框变橘黄色或蓝色。

html 表单input输入框在谷歌浏览器中边框被激活变色截图
表单input输入框在谷歌浏览器中边框被激活变色截图

google浏览器Chrome默认会为所有的输入框加上橘黄色的边框,虽然有时候可以使我们的网站看起来更友好,但对自定义的样式是有影响的。

例如做了一个圆角框的input输入框,如果没有对边框focus时的属性做任何休息,Chrome将默认加上一个正方形的边框,无视你将input的border设为none的命令。

为了避免麻烦我们可以禁止chrome为被激活的输入框添加边框,方法如下:

1. 禁止为所有被激活的输入框添加边框代码

  1. *:focus {outline: none} 

2. 禁止为被激活的输入框添加边框代码,例如

  1. input:focus{ outline:none } 

3. 也可以自定义输入框被激活时的边框样式代码

  1. input:focus { outline:Blue Solid 4px;} 
更新