Question

我长时间使用它为聚焦字段添加光晕，我第一次从Firefox访问了我的页面，并意识到它不适用于它，并且很可能不在探索器上。

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

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

Answer 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中显示）和box-shadow（对于其他浏览器）的某种组合。

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

相当于在其他浏览器中产生场发光？

1 个答案: