Cannot reset CSS outline to browser default

Question

I am working on a site where in the master css file anchor outline has been set to none like this:

*:focus {
    outline: none!important;
}

I have added a more specific class to override this the above like this:

header a:focus {
    outline: initial!important;
}

Problem is that this is not working. Below code works

outline: 2px solid $black!important;

but I want the browser default styling to show which I thought should be possible with "initial" keyword instead of me trying to mimic the all the default styles.

Setting `initial` [works for me](https://jsfiddle.net/uu423y4k/). Please create a working example to help demonstrate your issue. — showdev, Apr 26 '18 at 22:52
[initial does not refer to the browser default.](https://stackoverflow.com/questions/8228980/reset-css-display-property-to-default-value) — BoltClock, Apr 27 '18 at 16:55
@BoltClock ok so what do I do to refer to the browser default? — sayayin, Apr 29 '18 at 14:46

score 5 · Answer 1 · answered Aug 10 '21 at 22:21

5

Today I stumbled upon this. An easy fix was using revert. Works on Chrome for me.

.outline-reset {
  outline: revert !important;
}

answered Aug 10 '21 at 22:21

ssbarbee

1,626
2
16
24

Sébastien · Answer 2 · 2018-04-27T16:47:30.967

It may very well be that your browser does not have a default outline for the :focus pseudo-class. In this case initial and unset wouldn't help.

If you want a particular outline for some selectors you would have to define it:

:focus {
  outline: none;
}

header a:focus {
  outline: 1px dotted #666;
}

<p><a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a></p>

      <nav>
        <ul>
          <li><a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a></li>
        </ul>
      </nav>

      <header><a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a></header>

On my home machine (Windows 10) I tested on Firefox, Chrome, Edge and IE11: none show outlines by default on :focus.

Here is a test you can run in various browsers. To me it shows that the default in most browsers is the absence of an outline on the :focus state. The exception is IE11.

:focus {
  outline: 1px dotted #f60;
}

section :focus {
  outline: initial;
}

<body>
  <h2>With specified <code>:focus</code> outline</h2>
  <p><a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a></p>

  <nav>
    <ul>
      <li><a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a></li>
    </ul>
  </nav>

  <form>
    <button type="button">button button</button>
    <button type="button">submit button</button>
    <input type="submit" value="submit input">
    <input type="image" src="https://via.placeholder.com/100x30" border="0" alt="Submit" />
  </form>
  <a href="https://developer.mozilla.org/"><img src="https://via.placeholder.com/200x30"></a>

  <hr>

  <section>
    <h2>With <code>:focus</code> outline reset to <code>initial</code></h2>
    <p><a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a></p>

    <nav>
      <ul>
        <li><a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a></li>
      </ul>
    </nav>

    <form>
      <button type="button">button button</button>
      <button type="button">submit button</button>
      <input type="submit" value="submit input">
      <input type="image" src="https://via.placeholder.com/100x30" border="0" alt="Submit" />
    </form>
    <a href="https://developer.mozilla.org/"><img src="https://via.placeholder.com/200x30"></a>
  </section>

I was testing in chrome, haven't looked at any other browser yet. So display: initial does not work for you in chrome? — sayayin, Apr 27 '18 at 00:25

score 0 · Answer 3 · answered Oct 16 '19 at 01:14

If you define outline styles and want to ‘revert’ back to the default User Agent styles on :focus, this will help. You will find cross-browser issues using the initial property... I recommend this one.

.myClass:focus {
  outline: 1px dotted #212121;
  outline: 5px auto -webkit-focus-ring-color;
}

Stephen K. Karanja · Answer 4 · 2022-11-14T19:43:29.063

0

To get an outline close to the browser default, use the auto keyword with the appropriate color for your browser. See this link for more information.

a:focus {
    outline: 5px auto Highlight;
    outline: 5px auto -webkit-focus-ring-color;
}

edited Nov 14 '22 at 19:43

answered Nov 14 '22 at 19:33

Stephen K. Karanja

488
7
17

Cannot reset CSS outline to browser default

4 Answers4