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

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对待"大纲样式:自动;" 与其他浏览器不同.如果你想在浏览器中获得更相似的行为,我建议你使用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 +,Chrome 10+和Safari 5+中的跨浏览器发光.

选项2)您可以尝试使用大纲(将在Webkit中显示)和box-shadow(对于其他浏览器)的某种组合.

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