无法在引导程序 4 中更改 .custom-control-input 上的焦点轮廓答案

【问题标题】：cannot change focus outline on .custom-control-input in boostrap4无法在引导程序 4 中更改 .custom-control-input 上的焦点轮廓
【发布时间】：2016-09-29 13:57:58
【问题描述】：

我已经尝试了几个小时来更改自定义 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/

提前致谢！

【问题讨论】：

标签： css bootstrap-4

【解决方案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>

【讨论】：

啊，我正在查看 :focus 状态，因为这就是在检查器中显示边框的内容......我没有意识到它来自实际元素。谢谢你，阿图尔。