Вам нужно, чтобы ваш CSS-селектор был более конкретным или соответствовал тому, что делает Boostrap, в данном случае это фактически тень от рамки, а не контур:
.custom-control-input:focus~.custom-control-label::before {
box-shadow: none;
}
Пример: https://jsfiddle.net/q2rjxzob/1/
Вот фокус, который всегда фокусируется на самом input
, что делает его доступным.Используйте свой инструмент разработки, чтобы активировать :focus
и посмотреть, где применяются стили.Выберите элемент :before
, чтобы увидеть:
