MW WP FORMでラジオボタンの実装をしているときに表示が崩れてしまいました。
完成形は以下の通りです
現状は以下の通りで、擬似要素で設定している左の丸が多く表示されてしまってます。
MW WP FORMでは以下のように記述してまして、
元々labelの中にinput要素とspanタグがありましたが試行錯誤してましてspanタグを消してます。
PHP
1 <div class="contact_form_item"> 2 <dt class="contact_form_label"> 3 <label>お問い合わせの種類を選択してください(<span>資料請求の方は資料請求を選択ください</span>)</label> 4 </dt> 5 <dd class="contact_form_input"> 6 <div class="contact-form-radio"> 7 <label> [mwform_radio name="ラジオボタン" children="商談のご相談,サービスに関する問い合わせ,資料請求,その他"]</label> 8 </div> 9 </dd> 10</div>
HTMLでは以下の記述です。
HTML
1 <div class="contact_form_item"> 2 <dt class="contact_form_label"> 3 <label>お問い合わせの種類を選択してください(<span>資料請求の方は資料請求を選択ください</span>)</label> 4 </dt> 5 <dd class="contact_form_input"> 6 <div class="contact-form-radio"> 7 <label><input type="radio" name="your-radio" id="radio"><span>商談のご相談</span></label> 8 <label><input type="radio" name="your-radio" id="radio"><span>サービスに関するお問い合わせ</span></label> 9 <label><input type="radio" name="your-radio" id="radio"><span>資料請求</span></label> 10 <label><input type="radio" name="your-radio" id="radio"><span>その他</span></label> 11 </div> 12 </dd> 13 </div>
scss
1 .contact-form-radio { 2 label { 3 display: block; 4 @include fz(16,14); 5 &:not(:first-child) { 6 margin-top: 20px; 7 } 8 } 9 margin-top: 21px; 10 [type="radio"] { 11 display: none; 12 } 13 14 span { 15 padding-left: 26px; 16 position: relative; 17 18 &::before { 19 content:''; 20 width: 20px; 21 height:20px; 22 border:1px solid #707070; 23 position:absolute; 24 left:0; 25 top:50%; 26 transform:translateY(-50%); 27 border-radius: 50%; 28 } 29 &::after { 30 content:''; 31 width: 10px; 32 height:10px; 33 background:$main_blue; 34 position:absolute; 35 left:5px; 36 top:50%; 37 transform:translateY(-50%); 38 border-radius: 50%; 39 display: none; 40 } 41 } 42 [type="radio"]:checked + span { 43 &::after { 44 display: block; 45 } 46 } 47 }
検証ツール見てもどこがどの擬似要素なのかが全くわからなくてつまずいてしまったのでご教授いただけると嬉しいです
あなたの回答
tips
プレビュー