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.