札幌Web制作のシンクグラフィカ

葵さん (2019-10-31 17:09:05) infostar.sakura.ne.jp/test/mailformpro/contactform_test.html

Mailform Pro大変重宝させて頂いております。
ありがとうございます。

チェックボックスについて質問させてください。

チェックボックスをcssで装飾したのですが、
1番目のみレ点が表示されなくなってしまいました。
（2番目以降は問題なくレ点が表示されます）
装飾する前は問題なく1番目もレ点が表示されました。

申し訳ございませんが、ご教授頂けますと幸いです。

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---*/

Re:チェックボックスの1番目のみレ点が表示されない

葵さん (2019-11-06 19:56:47) infostar.sakura.ne.jp/test/mailformpro/contactform_test.html

ご教示いただきありがとうございます！
再起動してみましたが、変化ありませんでした...
ちなみにブラウザはChromeの最新版です。

Re:チェックボックスの1番目のみレ点が表示されない

葵さん (2019-11-07 19:40:38) infostar.sakura.ne.jp/test/mailformpro/contactform_test.html

さっそくのご回答、ありがとうございます！
解決いたしました。
お忙しい中、ご教示いただきまして本当にありがとうございました。