Chrome中输入框默认样式移除

  在chrome浏览器中会默认给页面上的输入框如input、textarea等渲染浏览器自带的边框效果

  IE8中效果如下:

  Chrome中输入框默认样式移除-LMLPHP  

  Chrome中效果如下:

Chrome中输入框默认样式移除-LMLPHP

 

这在我们未给输入框设置获取焦点时改变边框颜色时,chrome浏览器解析页面中默认将输入框获取焦点时改变边框效果,这给我们带来了极大的方便。如果我们要自己设置边框色时,chrome浏览器的默认操作就给我们的设置(boder:1px solid color)带来了问题,这是你会发现,你的设置在其他浏览器中时有效的,但在chrome中却是无效的。

为解决这问题我们只需加上如下css,便可解决问题:

*:focus { outline: none; }

  若想给某个输入框增加样式,也可这样操作:

#inputBT:focus { outline: 1px solid #ed6f19; }

  效果入下:

Chrome中输入框默认样式移除-LMLPHP

这样设置时会发现,在橘色边框旁还有一个细细的边框色,将css样式改为,即可完美解决:

#inputBT:focus { border: 1px solid #ed6f19; }
05-11 20:28