相当于在其他浏览器中产生场辉光？ [英] Equivalent to produce field glow in other browsers?

问题描述

我很久以前使用这个来添加一个光晕聚焦的字段，我访问我的页面从Firefox的第一次，意识到它不工作，它很可能不是在资源管理器。

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

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

解决方案

Webkit treatsoutline-style：auto;不同于其他浏览器。如果你想获得在浏览器之间更相似的行为，我建议你使用box-shadow代替。

使用此代码

  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+ 中的跨浏览器闪光。 p>

选项2）您可以尝试使用outline（将显示在Webkit中）和box-shadow（对于其他浏览器）的一些组合。

选项3）使用类似正式CSS 的库来处理跨平台输入样式为你。结果令人印象深刻。

I was long using this to add a glow to focused fields, I accessed my page from Firefox for the first time and realized it doesn't work on it, and most likely not on explorer either.

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

I had copy pasted it from another page so I'm not quite sure how it works. What is the equivalent for Firefox or Explorer? I mean how do I make a similar glow in other browsers? Thanks

解决方案

Webkit treats "outline-style: auto;" differently than other browsers. If you want to get behavior that's more similar across browsers I'd recommend you use box-shadow instead. It won't apply to older browsers (IE8 and earlier, or FF3.0 and earlier) but otherwise should be the same.

Using 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+ */
  }

I was able to produce a result that shows cross-browser glow in IE9+, FF4+, Chrome 10+, and Safari 5+.

Option 2) You could experiment with using some combination of outline (which will show in Webkit) and box-shadow (for other browsers).

Option 3) Use a library like Formalize CSS to take care of the cross-platform input styling for you. The results are pretty impressive.

这篇关于相当于在其他浏览器中产生场辉光？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！