相当于在其他浏览器中产生场辉光？答案

【问题标题】：Equivalent to produce field glow in other browsers?相当于在其他浏览器中产生场辉光？
【发布时间】：2011-01-13 23:38:59
【问题描述】：

长期以来，我一直在使用它来为重点领域添加光晕，我第一次从 Firefox 访问我的页面并意识到它在它上不起作用，而且很可能在资源管理器上也不起作用。

border: 1px solid #E68D29;
outline-color: -webkit-focus-ring-color;
outline-offset: -2px;
outline-style: auto;
outline-width: 5px;

我从另一个页面复制粘贴了它，所以我不太确定它是如何工作的。 Firefox 或 Explorer 的等价物是什么？我的意思是如何在其他浏览器中发出类似的光芒？谢谢

【问题讨论】：

stackoverflow.com/questions/3798919/…

标签： css cross-browser

【解决方案1】：

Webkit 处理 "outline-style: auto;"不同于其他浏览器。如果您想在浏览器中获得更相似的行为，我建议您改用 box-shadow。它不适用于较旧的浏览器（IE8 及更早版本，或 FF3.0 及更早版本），但其他浏览器应相同。

使用this code

  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+, Chrome 10+, and Safari 5+ 中生成显示跨浏览器发光的结果。

选项 2）您可以尝试使用轮廓（将在 Webkit 中显示）和框阴影（用于其他浏览器）的某种组合。

选项 3) 使用像 Formalize CSS 这样的库来为您处理跨平台输入样式。结果令人印象深刻。

【讨论】：