无法在 bootstrap 4 中更改 .custom-control-input 上的焦点轮廓

Question

我已经尝试了几个小时来更改自定义 boostrap 控件的焦点轮廓颜色。

我可以通过以下方式轻松更改背景：

.custom-control-input:checked~.custom-control-indicator {
background-color: red; 
}

但由于某种原因我无法定位轮廓颜色... 我试过：

input.custom-control-input:focus {
    outline: none !important;
    outline-color: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background-color: transparent !important;

}

``` 有人运行解决过这个问题吗？

这里是 fiddle：https://jsfiddle.net/robsilva/ht1cjLrb/1/

提前致谢！

Answer 1

.custom-control-input:checked~.custom-control-indicator {
  background-color: red!important;
}

.custom-control-input:focus ~ .custom-control-indicator {
    box-shadow: none !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" rel="stylesheet"/>
<label class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input">
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Check this custom checkbox</span>
</label>

无法在 bootstrap 4 中更改 .custom-control-input 上的焦点轮廓

cannot change focus outline on .custom-control-input in boostrap4

css

bootstrap-4