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{outline: rgb(229, 151, 0) auto 5px; outline-offset: -2px}, however it doesn't work (there is no auto for outline-style for other browsers).

Check my answer. Hope that it helps. ;) – Jo Smo Apr 07 '14 at 11:07 — Jo Smo, Apr 07 '14 at 11:07

score 34 · Answer 1 · answered Feb 08 '15 at 18:22

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;
 }

Jo Smo · Answer 2 · 2014-04-07T11:06:23.573

11

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;
}

edited Apr 07 '14 at 11:06

answered Apr 07 '14 at 11:01

Jo Smo

6,923
9
47
67

+1. This is the closest you can get to "auto" in other browsers. Fiddle a little with the border color and shadow transparency, and it can look quite similar. – Zilk Jun 28 '14 at 19:18

score 2 · Answer 3 · answered Oct 06 '17 at 17:54

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.

score 0 · Answer 4 · answered Sep 29 '14 at 11:23

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/

score -3 · Answer 5 · edited May 23 '17 at 12:26

-3

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).

edited May 23 '17 at 12:26

Community

1
1

answered Jun 26 '13 at 16:04

Ivozor

976
8
23

In my question I already posted the Chrome style and pointed out, that it doesn't work in other browsers. – geehertush01 Jun 26 '13 at 16:21
Maybe you can override other browsers' stylesheets with `!important`? – Ivozor Jun 26 '13 at 16:22
It won't change anything. It seems, that Chrome has some special settings, which cannot be achieved by css. As I already said, it uses `auto` as `outline-style` and it has no meaning for other browsers. – geehertush01 Jun 26 '13 at 16:44
Have you tried the different `outline-style` options? Some of it must be the one Chrome has set has auto... http://www.w3schools.com/cssref/pr_outline-style.asp – Ivozor Jun 26 '13 at 17:10
This is a link-only answer. – Puppy Sep 26 '16 at 10:59

score -4 · Answer 6 · answered Jun 26 '13 at 16:05

-4

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.

answered Jun 26 '13 at 16:05

James Pickering

105
1
1
8

In my question I already posted the Chrome style and pointed out, that it doesn't work in other browsers. – geehertush01 Jun 26 '13 at 16:22
Then you'll need to fake the effect you are looking to achieve using other CSS options or some variation on [Textarea Tricks](http://css-tricks.com/textarea-tricks/) – James Pickering Jul 04 '13 at 13:42

Copy Chrome default input's outline style

6 Answers6

Linked