入力チェック状態はCSSセレクタには影響しません

Question

私は、以下に示すようにチェックボックス状態でCSSセレクタをトリガしようとしていますが、私はそれをトリガすることはできませんでした。クリックで何が起こるべきかは、ティックは単に消えるべきです。

.i-cb input[type="checkbox"]:checked + label::before { 
    display: none; 
    width:0px; 
    height: 0px; 
} 

JSFiddle：https://jsfiddle.net/7tnepc8r/4/

Answer 1

それは順番に問題があります。

HTMLの順序を変更する必要があります。

+セレクタは、最初に指定された要素の直後（内側ではない）に配置される要素を選択するために使用されます。

.i-cb input[type=checkbox] { 
 
    visibility: hidden; 
 
} 
 

 
.i-cb label { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 44px; 
 
    height: 44px; 
 
    border: 4px solid #48c8f1; 
 
    border-radius: 50%; 
 
    border-top-color: transparent; 
 
    -ms-transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    z-index: 0; 
 
} 
 

 
.i-cb label::before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 6px; 
 
    height: 45px; 
 
    background-color: #93c83d; 
 
    left: 22px; 
 
    top: -15px; 
 
    z-index: 1; 
 
} 
 

 
.i-cb label::after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 18px; 
 
    height: 6px; 
 
    background-color: #93c83d; 
 
    left: 10px; 
 
    top: 24px; 
 
    z-index: 1; 
 
} 
 

 
.i-cb input[type=checkbox]:checked + label::after { 
 
    display: none !important; 
 
    width: 0px !important; 
 
    height: 0px !important; 
 
} 
 

 
.i-cb input[type=checkbox]:checked + label::before { 
 
    display: none; 
 
    width: 0px; 
 
    height: 0px; 
 
}

<div class="i-cb"> 
 
    <input id="check" type="checkbox" /> 
 
    <label for="check"></label> 
 
</div>

Answer 2

あなたが入力した後、ラベルを示す+記号を使用しているのであなただけの、マークアップの順序を変更する必要があります。

<div class="i-cb"> 
    <input id="check" type="checkbox" /> 
    <label for="check"></label> 
</div>