我很长时间使用它来为聚焦字段添加光晕,我第一次从Firefox访问了我的页面,并意识到它不适用于它,并且很可能也不在浏览器上.
border: 1px solid #E68D29; outline-color: -webkit-focus-ring-color; outline-offset: -2px; outline-style: auto; outline-width: 5px;
我从另一个页面粘贴了它,所以我不太确定它是如何工作的. Firefox或Explorer的等价物是什么？我的意思是如何在其他浏览器中制作类似的光晕？谢谢
解决方法
Webkit对待“大纲样式：自动;”与其他浏览器不同.如果你想在浏览器中获得更相似的行为,我建议你使用Box-shadow.它不适用于旧版浏览器(IE8及更早版本,或FF3.0及更早版本),但应该是相同的.
input {
border: 1px solid #E68D29;
}
input.focus {
border-color: #439ADC;
Box-shadow: 0 0 5px #439ADC; /* IE9,Chrome 10+,FF4.0+,Opera 10.9+ */
-webkit-Box-shadow: 0 0 5px #439ADC; /* Saf3.0+,Chrome */
-moz-Box-shadow: 0 0 5px #439ADC; /* FF3.5+ */
}
我能够在IE9+,FF4+,and Safari 5+中生成显示跨浏览器发光的结果.
选项2)您可以尝试使用大纲(将在Webkit中显示)和Box-shadow(对于其他浏览器)的某种组合.
选项3)使用像Formalize CSS这样的库来为您处理跨平台输入样式.结果令人印象深刻.
