チェックボックスCSS：チェックされたスタイリング

Question

私はCSSの問題点を理解しようとしていますが、何が間違っているのか実際にはわかりません。

基本的に、私はCSSでデフォルトのチェックボックススタイルをスタイリングしています。これは、チェックボックスをオンにするまで有効です。

私のコードの背後にあるアイデアは、チェックボックスをオンにするとサイズが大きくなり、背景色が赤に変わるはずです。さらに、（手動で）ボックスのチェックを外すまでスタイルを保持する必要があります。

問題の原因はありますか？私の意見では、問題は "input [type =" checkbox "]：checked .check-box-effect {"が始まります。

あなたはこれにすべてチェックするセレクタを変更する必要が

label { 
 
    display: inline-block; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    position: relative; 
 
} 
 

 
label .check-box-effect { 
 
    display: inline-block; 
 
    position: relative; 
 
    background-color: transparent; 
 
    width: 25px; 
 
    height: 25px; 
 
    border: 2px solid #dcdcdc; 
 
    border-radius: 10%; 
 
} 
 

 
label .check-box-effect:before { 
 
    content: ""; 
 
    width: 0px; 
 
    height: 2px; 
 
    border-radius: 2px; 
 
    background: #626262; 
 
    position: absolute; 
 
    transform: rotate(45deg); 
 
    top: 13px; 
 
    left: 9px; 
 
    transition: width 50ms ease 50ms; 
 
    transform-origin: 0% 0%; 
 
} 
 

 
label .check-box-effect:after { 
 
    content: ""; 
 
    width: 0; 
 
    height: 2px; 
 
    border-radius: 2px; 
 
    background: #626262; 
 
    position: absolute; 
 
    transform: rotate(305deg); 
 
    top: 16px; 
 
    left: 10px; 
 
    transition: width 50ms ease; 
 
    transform-origin: 0% 0%; 
 
} 
 

 
label:hover .check-box-effect:before { 
 
    width: 5px; 
 
    transition: width 100ms ease; 
 
} 
 

 
label:hover .check-box-effect:after { 
 
    width: 10px; 
 
    transition: width 150ms ease 100ms; 
 
} 
 

 
input[type="checkbox"] { 
 
    display: none; 
 
} 
 

 
input[type="checkbox"]:checked .check-box-effect { 
 
    background-color: red !important; 
 
    transform: scale(1.25); 
 
} 
 

 
input[type="checkbox"]:checked .check-box-effect:after { 
 
    width: 10px; 
 
    background: #333; 
 
    transition: width 150ms ease 100ms; 
 
} 
 

 
input[type="checkbox"]:checked .check-box-effect:before { 
 
    width: 5px; 
 
    background: #333; 
 
    transition: width 150ms ease 100ms; 
 
} 
 

 
input[type="checkbox"]:checked:hover .check-box-effect { 
 
    background-color: #dcdcdc; 
 
    transform: scale(1.25); 
 
} 
 

 
input[type="checkbox"]:checked:hover .check-box-effect:after { 
 
    width: 10px; 
 
    background: #333; 
 
    transition: width 150ms ease 100ms; 
 
} 
 

 
input[type="checkbox"]:checked:hover .check-box-effect:before { 
 
    width: 5px; 
 
    background: #333; 
 
    transition: width 150ms ease 100ms; 
 
}

<label>  
 
      <input type="checkbox" id="chkProdTomove" /> 
 
      <span class="check-box-effect"></span> 
 
     </label>

Answer 1

以下のコード見つけてください：

input[type="checkbox"]:checked + .check-box-effect:before

label { 
 
    display: inline-block; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    position: relative; 
 
} 
 

 
label .check-box-effect { 
 
    display: inline-block; 
 
    position: relative; 
 
    background-color: transparent; 
 
    width: 25px; 
 
    height: 25px; 
 
    border: 2px solid #dcdcdc; 
 
    border-radius: 10%; 
 
} 
 

 
label .check-box-effect:before { 
 
    content: ""; 
 
    width: 0px; 
 
    height: 2px; 
 
    border-radius: 2px; 
 
    background: #626262; 
 
    position: absolute; 
 
    transform: rotate(45deg); 
 
    top: 13px; 
 
    left: 9px; 
 
    transition: width 50ms ease 50ms; 
 
    transform-origin: 0% 0%; 
 
} 
 

 
label .check-box-effect:after { 
 
    content: ""; 
 
    width: 0; 
 
    height: 2px; 
 
    border-radius: 2px; 
 
    background: #626262; 
 
    position: absolute; 
 
    transform: rotate(305deg); 
 
    top: 16px; 
 
    left: 10px; 
 
    transition: width 50ms ease; 
 
    transform-origin: 0% 0%; 
 
} 
 

 
label:hover .check-box-effect:before { 
 
    width: 5px; 
 
    transition: width 100ms ease; 
 
} 
 

 
label:hover .check-box-effect:after { 
 
    width: 10px; 
 
    transition: width 150ms ease 100ms; 
 
} 
 

 
input[type="checkbox"] { 
 
    display: none; 
 
} 
 

 
input[type="checkbox"]:checked + .check-box-effect { 
 
    background-color: red !important; 
 
    transform: scale(1.25); 
 
} 
 

 
input[type="checkbox"]:checked + .check-box-effect:after { 
 
    width: 10px; 
 
    background: #333; 
 
    transition: width 150ms ease 100ms; 
 
} 
 

 
input[type="checkbox"]:checked + .check-box-effect:before { 
 
    width: 5px; 
 
    background: #333; 
 
    transition: width 150ms ease 100ms; 
 
} 
 

 
input[type="checkbox"]:checked:hover + .check-box-effect { 
 
    background-color: #dcdcdc; 
 
    transform: scale(1.25); 
 
} 
 

 
input[type="checkbox"]:checked:hover + .check-box-effect:after { 
 
    width: 10px; 
 
    background: #333; 
 
    transition: width 150ms ease 100ms; 
 
} 
 

 
input[type="checkbox"]:checked:hover + .check-box-effect:before { 
 
    width: 5px; 
 
    background: #333; 
 
    transition: width 150ms ease 100ms; 
 
}

<label>  
 
      <input type="checkbox" id="chkProdTomove" /> 
 
      <span class="check-box-effect"></span> 
 
     </label>

を

Answer 2

あなたがチェックボックスがチェックされたときに次の要素をターゲットにする必要があります。

input[type="checkbox"]:checked + .check-box-effect { 
    background-color: red !important; 
    transform: scale(1.25); 
} 

あなたの現在のコードは、チェックボックスの子であるかどう.check-box-effectをターゲットにしようとしています。