Geek Answers Handbook

Equivalent to produce field glow in other browsers?

I used this for a long time to add a glow to the focused fields, I first went to my page from Firefox and realized that it does not work on it, and most likely not in Explorer.

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

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

+6
css cross-browser
source share
1 answer

Webkit considers "contour style: auto"; different than other browsers. If you want the behavior to be more similar in browsers, I would recommend you use box-shadow instead. It will not apply to older browsers (IE8 and earlier, or FF3.0 and earlier), but otherwise they 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 managed to create a result showing the cross-browser glow in IE9 +, FF4 +, Chrome 10+ and Safari 5+ .

Option 2) You can experiment using some combination of path (which will be displayed in Webkit) and box-shadow (for other browsers).

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

+8
source share

More articles:


All Articles