去掉 Chrome 输入框激活时的蓝色边框

[gangsta]

Chrome中原生表单输入框或者按钮active时会有一个蓝色的外廓边框,个人觉得比较难看

http://stackoverflow.com/q/2943548/1299675
综合上面这个帖子里和Google得到的一些css hack,可以去掉:

input, input:focus, button, button:focus{
outline:none;
outline:1px !important;
}

但是这样写CSS样式后,在有的浏览器里会有问题:
输入框无法获得焦点
而且也存在原答主说的那个问题:
but keep in mind this is potentially bad for usability: It will be hard to tell whether an element is focused, which can suck when you walk through all a form's elements using the Tab key - you should reflect somehow when an element is focused.

---------------------------------------------

请问大家都是怎么解决这个问题的?

[crs0910]

如果是自己的网站，那就定义focus的样式，去outline然后加个边框或者阴影。
“无法获得焦点”的情况不知道，没见过去掉outline会这样。
如果是想改掉chrome的默认样式，那也只能去掉outline了，加其它样式可能跟一些网站的样式不搭，这个没办法。

[gangsta]

@crs0910

我在iPhone上用Safari测试,输入框获取焦点不行

参考了下BootStrap的写法 确实是通过:focus的样式来处理的.