反应碳焦点上的恼人边界 Chrome

Question

我正在使用 Carbon React，但我无法弄清楚如何在关注复选框时删除烦人的蓝色边框。我知道大纲：none 是解决方案，但我找不到我应该把它放在哪个 attribute/element 上。即使在 Storybook of Carbon (http://react.carbondesignsystem.com/?path=/story/checkbox--checked) 上，单击复选框组件时也会出现同样的问题。（仅限 Chrome）

Answer 1

只需添加以下样式

.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
}

如果全部删除，您可能想更改边框样式，那么您将无法检测到复选框。

Answer 2

您要修复的 CSS class 是这个

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

编写自定义 class 来覆盖操作。

Answer 3

对于碳纤维设计，我只能使用：

      :focus{
        outline: 2px solid transparent !important;
        outline-offset: 2px !important;
      }

反应碳焦点上的恼人边界 Chrome

Annoying border on react carbon focus Chrome

css

outline

reactjs