不能改變焦點大綱在自定義控制輸入boostrap4

Question

我一直在嘗試幾個小時來改變自定義的自動提升控件的焦點輪廓顏色。

我能夠用輕鬆更改背景：

.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

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