6

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

thirtydot
  • 224,678
  • 48
  • 389
  • 349
lisovaccaro
  • 32,502
  • 98
  • 258
  • 410
  • 1
    http://stackoverflow.com/questions/3798919/how-to-simulate-chrome-safari-border-around-active-input-or-textarea-on-other-ele – Almost Famous Jan 13 '11 at 23:52

1 Answers1

9

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.

metavida
  • 1,341
  • 11
  • 12