は、boostrap4の.custom-control-inputのフォーカスアウトラインを変更できません。

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>