Cannot reset CSS outline to browser default

Asked 26/4, 2018 at 22:47 Answered 14/11, 2022 at 19:33

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.

Camera answered 26/4, 2018 at 22:47 Comment(3)

Setting initial works for me. Please create a working example to help demonstrate your issue. – Marita 26/4, 2018 at 22:52

initial does not refer to the browser default. – Necrology 27/4, 2018 at 16:55

@Necrology ok so what do I do to refer to the browser default? – Camera 29/4, 2018 at 14:46

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

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

Actino answered 10/8, 2021 at 22:21 Comment(0)

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

Umpire answered 16/10, 2019 at 1:14 Comment(0)

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>

Potpie answered 26/4, 2018 at 23:23 Comment(1)

I was testing in chrome, haven't looked at any other browser yet. So display: initial does not work for you in chrome? – Camera 27/4, 2018 at 0:25

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

Glanti answered 14/11, 2022 at 19:33 Comment(0)

Recommended topics

Hot tags