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

With Chrome 60 the outline is now blue.

The auto style of outline creates a one pixel outline, with the corners "notched".

This can be achieved using ::before and ::after rules like so:

DIV.someclass--focus {
    outline:none; 
    border: 1px solid #86A8DF !important;
}
DIV.someclass--focus::before {
    position:absolute;
    margin-top:-2px;
    margin-bottom: -2px;
    margin-left: -1px;
    margin-right: -1px;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    content: ' ';
    border-left: none;
    border-right: none;
    border-top: 1px solid #A6C8FF;
    border-bottom: 1px solid #A6C8FF;
}
DIV.someclass--focus::after {
    position:absolute;
    margin-top: -1px;
    margin-bottom: -1px;
    margin-left: -2px;
    margin-right: -2px;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    content: ' ';
    border-left: 1px solid #A6C8FF;
    border-right: 1px solid #A6C8FF;
    border-top: none;
    border-bottom: none;
}

The first rule changes the border color.

The second rule provides a top and bottom border that starts one pixel in from the left and ends one pixel in from the right.

The thirder rule provides a left and right border that starts one down from the top, and ends one pixel up from the bottom.

CAVEAT: the containing element must be explicitly "position: relative" in order for the ::before/::after absolute positioning to work.

The classname "someclass-focus" is meaningless... it just has to be applied/removed whenever you want the pseudo focus outline to appear/disappear.

Answer 2

If you inspect any input tag with the styles panel open in Chrome you should see the default user agent stylesheet properties. Use the colour picker in Web developer tools or the chrome colour picker plugin to get the rgb value.

Answer 3

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/

Answer 4

Try here:

Browsers' default CSS for HTML elements

You have the default CSS of Google Chrome there. I'm sure the style will be defined there.

P.S.: You will want Chrome/Safari (WebKit).

Answer 5

default Chrome outline-style:

outline-color: rgb(77, 144, 254); // #4D90FE
outline-offset: -2px;
outline-style: auto;
outline-width: 5px;

convert to this

 input:focus {
     outline:none; 
     border:1px solid #4D90FE;
     -webkit-box-shadow: 0px 0px 5px  #4D90FE;
     box-shadow: 0px 0px 5px  #4D90FE;
 }

Answer 6

Don't know if my solution is good enough for you, but so far, i don't know any other way... I do it like this:

textarea:focus
{
    outline:none; /*or outline-color:#FFFFFF; if the first doesn't work*/
    border:1px solid #48A521;
    -webkit-box-shadow: 0px 0px 4px 0px #48A521;
    box-shadow: 0px 0px 4px 0px #48A521;
}