无法改变焦点轮廓在.rapust4中的.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;

}

``` 有没有人遇到过这个问题呢？

这是一个小提琴：https://jsfiddle.net/robsilva/ht1cjLrb/1/

提前致谢！

Answer 1

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;