Outline-offset does not get applied on Chrome/ Windows when outline-style is auto

Question

I am applying a style to the focused element that is on the lines of:

.<class-name>:focus {
  outline: 4px auto #068065 !important;
  outline-offset: 2px !important;
}

(This is part of a Chrome extension code, so it does not need to be cross-browser).

The issue is that the outline-offset does not get applied on Chrome/Windows when the outline-style is "auto". On Chrome/Mac, this works fine.

If I change the outline-style from "auto" to "solid", the outline-offset works just fine.

I would like to be able to use both the "auto" style and the outline offset. Any thoughts or suggestions?

Armed

Answer 1

I found out how to adjist the outline-offset on a DIV or other element in Chrome.

The default outline-style: auto means that the browser can choose the style, and outline-offset doesn't work with that style in Chrome. We can use outline-offset with outline-style: solid.

div {
    outline-color: #068065;
    outline-style: solid;
    outline-offset: 4px;
    outline-width: 4px;
    
    border: 1px solid red;  /* for comparison */
}

<h1>Testing</h1>

<div>
Hello, world
</div>

Milagrosmilam

Answer 2

EDIT:

I guess I found a fix.

try adding display: inline-block to the element where you apply your outline on. that should work

---

You are using the shorthand for outline-* this will not work you have to use all the outline-functions like this:

outline-color: #068065;
outline-style: auto;
outline-offset: 2px !important;
outline-width: 4px;

Hope it helps!

Colfin

Tried this, seeing the issue still. The offset does not seem to apply as long as the style is "auto". – Armed

note that outline-style: auto; does nothing in IE, but it should work in chrome. put the outline-style beneath the outline-offset. does that work? – Colfin

Did try putting the style after the offset. Doesn't work. Yes, aware that the outline-style auto does not work on IE. Only need it for Chrome at the moment. – Armed

I searched for the problem on google but could not find something. instead use border if the problem isn't fixed. – Colfin

Yeah, it's a strange quirk. I am hoping that tapping into the SO community will help :) Don't think border will help, I am not aware of a way to add an offset to a border. Also, border takes up space (unlike outline) which is not desirable in this case. Thanks for the help. – Armed

Running into another related issue, posted here: #17147207 – Armed

Yes I know. I've heard of this problem. Hope you fix it somehow. – Colfin

Even if this does fix the outline offset, this is not a viable solution. I am working on a browser extension that changes the style of the element that gets focus on tabbing. Changing the display property won't make sense in this scenario. – Armed

Ah, that's crap. Hope you'll find another way then. – Colfin

Finally decided to not use "auto" for styling the outline. It was giving a bunch of issues on both Windows and Mac. Thanks for the help. – Armed

Your welcome :), you could still accept the answer. because i was the only one who answered this question. but that's up to you :) – Colfin