Copy Chrome default input's outline style

Question

How can I set the default Chrome input\'s outline style (on focus, the orange one), so it looks the same in every browser? Chrome style seems to be textarea:focus{outl

Answer 1

You can't, really.

Chrome uses the 'auto' outline-style (whatever that may mean) and that isn't according to the CSS3 specs.

Your best option is to create your own highlight styling and (and at least) overwrite the outline-style. That way all browsers will have the same focus element for your page.

Copying the chrome style is very hard to do. Since css by default doesn't support a shadow-like outline, only solid, dashed, etc styles are supported. You will have to mimick it using box-shadow, however, this will, for some odd reason, cause the border of the input box to show (in inset style), which forces you to define the border of the input box.

You could do something like this for example:

input:focus {
  box-shadow: 0px 0px 8px blue;
  outline-style: none;
}
input {
  border: 1px solid #999;
}

http://jsfiddle.net/dstibbe/2wr0pge2/2/