7

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?

tanushree
  • 763
  • 1
  • 7
  • 20

2 Answers2

4

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>
Sam Watkins
  • 7,819
  • 3
  • 38
  • 38
1

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!

Kees Sonnema
  • 5,759
  • 6
  • 51
  • 106
  • 2
    Tried this, seeing the issue still. The offset does not seem to apply as long as the style is "auto". – tanushree Jun 17 '13 at 07:42
  • 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? – Kees Sonnema Jun 17 '13 at 07:53
  • 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. – tanushree Jun 17 '13 at 08:13
  • I searched for the problem on google but could not find something. instead use border if the problem isn't fixed. – Kees Sonnema Jun 17 '13 at 08:46
  • 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. – tanushree Jun 17 '13 at 12:02
  • Running into another related issue, posted here: http://stackoverflow.com/questions/17146707/outline-is-drawn-incorrectly-on-chrome-if-outline-style-is-set-to-solid-and-n – tanushree Jun 17 '13 at 12:03
  • Yes I know. I've heard of this problem. Hope you fix it somehow. – Kees Sonnema Jun 17 '13 at 12:03
  • 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. – tanushree Jun 17 '13 at 12:15
  • Ah, that's crap. Hope you'll find another way then. – Kees Sonnema Jun 17 '13 at 12:17
  • 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. – tanushree Jun 20 '13 at 13:43
  • Your welcome :), you could still accept the answer. because i was the only one who answered this question. but that's up to you :) – Kees Sonnema Jun 20 '13 at 13:53