Невозможно сбросить контур CSS в браузер по умолчанию - PullRequest
Новая
       11

Невозможно сбросить контур CSS в браузер по умолчанию

0 голосов
/ 27 апреля 2018

Я работаю над сайтом, где в основном файле привязки CSS-файла не задано ничего подобного: 

*:focus {
    outline: none!important;
}

Я добавил более конкретный класс, чтобы переопределить это, как показано выше: 

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

Проблема в том, что это не работает. Ниже код работает 

outline: 2px solid $black!important;

но я хочу, чтобы стиль браузера по умолчанию показывал то, что, по моему мнению, должно быть возможно с ключевым словом "initial" вместо того, чтобы я пытался имитировать все стили по умолчанию.

1 Ответ

0 голосов
/ 27 апреля 2018

Вполне может быть, что в вашем браузере отсутствует контур по умолчанию для псевдокласса :focus. В этом случае начальные и неустановленные не помогут.

Если вы хотите конкретную схему для некоторых селекторов, вам нужно определить ее: 

: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>

На моем домашнем компьютере (Windows 10) я тестировал на Firefox, Chrome, Edge и IE11: ни один не показывает контуры по умолчанию на :focus.

Вот тест, который вы можете запустить в различных браузерах. Для меня это показывает, что по умолчанию в большинстве браузеров это отсутствие контура в состоянии :focus. Исключением является 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...