Chrome中输入框默认样式移除
Chrome中输入框默认样式移除
在chrome浏览器中会默认给页面上的输入框如input、textarea等渲染浏览器自带的边框效果
IE8中效果如下:
Chrome中效果如下:
这在我们未给输入框设置获取焦点时改变边框颜色时,chrome浏览器解析页面中默认将输入框获取焦点时改变边框效果,这给我们带来了极大的方便。如果我们要自己设置边框色时,chrome浏览器的默认操作就给我们的设置(boder:1px solid color)带来了问题,这是你会发现,你的设置在其他浏览器中时有效的,但在chrome中却是无效的。
为解决这问题我们只需加上如下css,便可解决问题:
*:focus { outline: none; }
若想给某个输入框增加样式,也可这样操作:
#inputBT:focus { outline: 1px solid #ed6f19; }
效果入下:
这样设置时会发现,在橘色边框旁还有一个细细的边框色,将css样式改为,即可完美解决:
#inputBT:focus { border: 1px solid #ed6f19; }