Re:チェックボックスの1番目のみレ点が表示されない
葵さん (2019-11-06 16:15:51) infostar.sakura.ne.jp/test/mailformpro/contactform_test.html
ご回答いただきまして、ありがとうございます！
1番目にダミーのチェックボックスを置いて非表示にしてみましたら、
全ての選択項目にレ点が表示されるようになりました。
しかし今度は必須項目の警告文が出なくなってしまいました...
1番目のチェックボックスの初期状態が勝手にcheckedのような状態になってしまっているのでしょうか。
度々申し訳ございませんが、お手すきの際にご回答いただけましたら幸いです。
チェックボックスのスタイルは下記のとおりです。
<dt class="mfp"><span class="must">【必須】</span>発送希望月</dt>
<dd class="mfp">
<p>発送希望月をお選び下さい※複数選択可※</p>
<div class="mfp_rows">
<div class="mfp_col5 checkbox">
<label for="checkbox001" class="displaynone"><input type="checkbox" name="発送希望月" value="ダミー" required="required" class="checkbox-input" id="checkbox00"><span class="checkbox-parts"> ダミー</span></label>
<label for="checkbox01"><input type="checkbox" name="発送希望月" value="2020年2月" required="required" class="checkbox-input" id="checkbox01"><span class="checkbox-parts"> 2020年2月</span></label>
<label for="checkbox02"><input type="checkbox" name="発送希望月" value="2020年3月" required="required" class="checkbox-input" id="checkbox02"><span class="checkbox-parts"> 2020年3月</span></label>
<label for="checkbox03"><input type="checkbox" name="発送希望月" value="2020年4月" required="required" class="checkbox-input" id="checkbox03"><span class="checkbox-parts"> 2020年4月</span></label>
</div>
</div>
</dd>
/*---Checkboxes styles---*/
.displaynone{
display: none !important;
}
.checkbox-input{
display: none;
}
.checkbox-parts{
padding-left: 20px;
position:relative;
margin-right: 20px;
}
.checkbox-parts::before{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
border: 1px solid #999;
border-radius: 4px;
}
.checkbox-input:checked + .checkbox-parts{
color: #d01137;
}
.checkbox-input:checked + .checkbox-parts::after{
content: "";
display: block;
position: absolute;
top: -5px;
left: 5px;
width: 7px;
height: 14px;
transform: rotate(40deg);
border-bottom: 3px solid #d01137;
border-right: 3px solid #d01137;
}
/*---/Checkboxes styles---*/