「必須」機能を含めるようにCSSチェックボックスのラベルを変更するには

Question

CSSチェックボックスを作成しました。これは、私が打ち砕いたCodePenスクリプトに基づいていますが、「必須」チェックボックスの修正方法を見つけることができません。私ができることは、 "ホバー"のボックスシャドウの色を変えることですが、それは私が得ることができるほど近くにあります。ここで

は私が持っているものです。

.checkbox1 { 
 
    width: 25px; 
 
    margin: 20px 100px; 
 
    position: relative; 
 
} 
 

 
.checkbox1 label { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    width: 16px; 
 
    height: 16px; 
 
    top: 2px; 
 
    left: 3px; 
 
    background: linear-gradient(#ffffff, #dddddd 80%); 
 
    border: 0.5px solid #7d878d; 
 
    border-radius: 4px; 
 
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); 
 
} 
 

 
.checkbox1 label:after { 
 
    opacity: 0.0; 
 
    content: ''; 
 
    position: absolute; 
 
    width: 14px; 
 
    height: 6px; 
 
    background: transparent; 
 
    top: 1px; 
 
    left: 2px; 
 
    border: 3px solid #ff6600; 
 
    border-top: none; 
 
    border-right: none; 
 
    transform: rotate(-50deg); 
 
} 
 

 
.checkbox1 label::after { 
 
    opacity: 0.0; 
 
} 
 

 
.checkbox1 input[type=checkbox]:checked+label:after { 
 
    opacity: 5; 
 
} 
 

 
.checkbox2 { 
 
    width: 25px; 
 
    margin: 20px 100px; 
 
    position: relative; 
 
} 
 

 
.checkbox2 label { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    width: 16px; 
 
    height: 16px; 
 
    top: 2px; 
 
    left: 3px; 
 
    background: linear-gradient(#ffffff, #dddddd 80%); 
 
    border: 0.5px solid #7d878d; 
 
    border-radius: 4px; 
 
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); 
 
} 
 

 
.checkbox2 label:after { 
 
    opacity: 0.0; 
 
    content: ''; 
 
    position: absolute; 
 
    width: 14px; 
 
    height: 6px; 
 
    background: transparent; 
 
    top: 1px; 
 
    left: 2px; 
 
    border: 3px solid #ff6600; 
 
    border-top: none; 
 
    border-right: none; 
 
    transform: rotate(-50deg); 
 
} 
 

 
.checkbox2 label::after { 
 
    opacity: 0.0; 
 
} 
 

 
.checkbox2 label:hover { 
 
    box-shadow: 0px 0px 4px 0px #ff0000; 
 
    opacity: 5; 
 
} 
 

 
.checkbox2 input[type=checkbox]:checked+label:after { 
 
    opacity: 5; 
 
}

<div class="checkbox1"> 
 
    <input type="checkbox" value="1" id="input1" name="" /> 
 
    <label for="input1"></label> 
 
</div> 
 

 
<div class="checkbox2"> 
 
    <input type="checkbox" value="2" id="input2" name="" required="" /> 
 
    <label for="input2"></label> 
 
</div>

Answer 1

使用[required]それがチェックされているかどうかに基づいて、あなたのスタイルを作る、その後、required属性を持つチェックボックスを選択します。

元のコードを編集して、以下のデモでこれが動作することを確認しました。私は、変更箇所を示すためにCSSにコメントを追加しました。

ご覧のとおり、2番目のチェックボックスは「必須」とマークされています。したがって、[required]初期スタイル（赤いボックスの影）が適用されます。チェックされると、[required]:checkedのスタイルが適用されます。必要なことで

.checkbox1 { 
 
    width: 25px; 
 
    margin: 20px 100px; 
 
    position: relative; 
 
} 
 

 
.checkbox1 label { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    width: 16px; 
 
    height: 16px; 
 
    top: 2px; 
 
    left: 3px; 
 
    background: linear-gradient(#ffffff, #dddddd 80%); 
 
    border: 0.5px solid #7d878d; 
 
    border-radius: 4px; 
 
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); 
 
} 
 

 
.checkbox1 label:after { 
 
    opacity: 0.0; 
 
    content: ''; 
 
    position: absolute; 
 
    width: 14px; 
 
    height: 6px; 
 
    background: transparent; 
 
    top: 1px; 
 
    left: 2px; 
 
    border: 3px solid #ff6600; 
 
    border-top: none; 
 
    border-right: none; 
 
    transform: rotate(-50deg); 
 
} 
 

 
.checkbox1 label::after { 
 
    opacity: 0.0; 
 
} 
 

 
.checkbox1 input[type=checkbox]:checked+label:after { 
 
    opacity: 5; 
 
} 
 

 
.checkbox2 { 
 
    width: 25px; 
 
    margin: 20px 100px; 
 
    position: relative; 
 
} 
 

 
.checkbox2 label { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    width: 16px; 
 
    height: 16px; 
 
    top: 2px; 
 
    left: 3px; 
 
    background: linear-gradient(#ffffff, #dddddd 80%); 
 
    border: 0.5px solid #7d878d; 
 
    border-radius: 4px; 
 
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); 
 
} 
 

 
.checkbox2 label:after { 
 
    opacity: 0.0; 
 
    content: ''; 
 
    position: absolute; 
 
    width: 14px; 
 
    height: 6px; 
 
    background: transparent; 
 
    top: 1px; 
 
    left: 2px; 
 
    border: 3px solid #ff6600; 
 
    border-top: none; 
 
    border-right: none; 
 
    transform: rotate(-50deg); 
 
} 
 

 
.checkbox2 label::after { 
 
    opacity: 0.0; 
 
} 
 

 
/* Here, we set the default style of an UNCHECKED REQUIRED checkbox */ 
 
.checkbox2 input[type="checkbox"][required]+label { 
 
    box-shadow: 0px 0px 4px 0px #ff0000; 
 
    opacity: 5; 
 
} 
 

 
/* Now, we set the style of a CHECK REQUIRED checkbox */ 
 
.checkbox2 input[type="checkbox"][required]:checked+label { 
 
    box-shadow: 0px 0px 0px 0px transparent !important; /* Remove the box-shadow */ 
 
} 
 

 
.checkbox2 input[type=checkbox]:checked+label:after { 
 
    opacity: 5; 
 
}

<div class="checkbox1"> 
 
    <input type="checkbox" value="1" id="input1" name="" /> 
 
    <label for="input1"></label> 
 
</div> 
 

 
<div class="checkbox2"> 
 
    <input type="checkbox" value="2" id="input2" name="" required="" /> 
 
    <label for="input2"></label> 
 
</div>