Удалить: стиль контура фокуса из псевдоэлементов :: before и :: after - PullRequest
0 голосов
/ 19 февраля 2019

Используя переключатель Bootstrap, я хочу удалить синий контур на переключателе при фокусировке.Обычно я просто применяю #element:focus { outline: none; }, но поскольку они отображаются с использованием псевдоэлементов, я не могу этого сделать.

Fiddle

<div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="customSwitch1">
    <label class="custom-control-label" for="customSwitch1">
        <span>Show Favorites</span>
    </label>
</div>

1 Ответ

0 голосов
/ 19 февраля 2019

Вам нужно, чтобы ваш CSS-селектор был более конкретным или соответствовал тому, что делает Boostrap, в данном случае это фактически тень от рамки, а не контур:

.custom-control-input:focus~.custom-control-label::before {
  box-shadow: none;
}

Пример: https://jsfiddle.net/q2rjxzob/1/

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

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...