Раздражающая граница на реагирующем угольном фокусе Chrome

Question

Я использую Carbon React и не могу понять, как убрать эту раздражающую синюю рамку при фокусировке на флажок. Я знаю эту схему: ни один не является решением, но я не могу найти, на какой атрибут / элемент я должен поместить его. Даже в Storybook of Carbon (http://react.carbondesignsystem.com/?path= / story / checkbox - флажок ) такая же проблема возникает при нажатии на компонент Checkbox. (только на Chrome)

Answer 1

Класс CSS, который вы хотите исправить, это

.bx--checkbox-label::before, .bx--checkbox-label::after

, пишущий пользовательский класс для переопределения действия.

Answer 2

Просто добавьте следующий стиль

.bx--checkbox:focus+.bx--checkbox-label::before, .bx--checkbox-label__focus::before, .bx--checkbox:checked:focus+.bx--checkbox-label::before, .bx--checkbox-label[data-contained-checkbox-state='true'].bx--checkbox-label__focus::before, .bx--checkbox:indeterminate:focus+.bx--checkbox-label::before, .bx--checkbox-label[data-contained-checkbox-state='mixed'].bx--checkbox-label__focus::before {
  border: 0
}

Если вы удалите все, вы можете изменить стиль рамки, тогда вы не сможете обнаружить флажок.