从:: before和:: after伪元素中删除：focus轮廓样式

Question

使用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>

Answer 1

在这种情况下，您需要CSS选择器来更具体或更匹配Boostrap所做的事情，实际上它是一个框阴影而不是轮廓：

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

示例：https://jsfiddle.net/q2rjxzob/1/

这是一个诀窍，始终将焦点放在input本身上，这就是保持访问性的原因。使用您的开发工具来激活:focus并查看在哪里应用样式。选择:before元素以查看：

Answer 2

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

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