选中时从HTML文本输入中删除蓝色发光


73

如何使用纯CSS消除包围所选文本输入框的蓝色发光?


2
实际上,在Google Chrome浏览器中是橙色。只是说;)
wecsam '02

1
@wecsam:刚开始我真的很困惑,因为我已经习惯了Chrome的橙色轮廓。:P
Purag

Answers:


150

应该这样做:

input:focus {
    outline:none;
}

编辑(2015):如果要针对广大受众进行设计,请记住,对于使用键盘导航或需要更明显视觉反馈的用户而言,轮廓通常是一项关键的辅助功能。如果删除轮廓,请确保定义一个替代焦点状态,该状态可以为用户提供适当的视觉反馈。


19
有时会出现阴影:也不需要
散布

1
都不适用于我的Chrome version 45.0.2454.101 m:(
J86,2015年

由于浏览器的限制,因此select> options属性大纲由shadowDOM处理。您可以尝试[This](Harvesthq.github.io/chosen)jQuery插件
TechYogi

14

我更喜欢像这样的可靠重置:

input, textarea, select, a { outline: none; }

锚标记上的轮廓“无”可防止在许多Android浏览器上出现可怕的焦点轮廓。


输入的大纲仅允许重点关注
Anselm

我也喜欢这个。另外,select:focus似乎对我没有用。我完全没有发现这样做的问题。该:focus是不必要的明确。
taylorcressy 2014年

我需要添加 !important它才能为我工作。
JoeTidee '16
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.