###課題
フォームヘルパーで生成されたHTMLをカスタマイズしたい(ラジオボタン)です。
CSSやタグがずれて、思った通りの表示ができ無くて、悩んでます。
###該当のソースコード
①cakePHP3のフォームヘルパーで設定したコード
<div class="form-group"> <label for="radio_label">A系・B系<span>*</span></label> <?= $this->Form->input('radio_id', [ 'type' => 'radio', 'label' => false, 'class' => 'from-control', 'options' => [1=>"A系", 2=>"B系"], 'default' => 1 ]); ?> </div>
①ブラウザで表示されたhtmlコード
<div class="input radio"> <input type="hidden" name="radio_id" value=""> <label for="radio-id-1"> <input type="radio" name="radio_id" value="1" id="radio-id-1" class="from-control"> 文系 </label> <label for="radio-id-2"> <input type="radio" name="radio_id" value="2" id="radio-id-2" class="from-control"> 理系 </label> </div>
②上記設定前のコード
<div class="form-group"> <label for="radio_label">A系・B系<span>*</span></label> <div class="radio-group"> <label> <input type="radio" name="radio" class="radio" /> <span class="radio-icon"></span>A系 </label> <label> <input type="radio" name="radio" class="radio" /> <span class="radio-icon"></span>B系 </label> </div> </div>
CSS
1.radio-group .radio:checked+.radio-icon:before { 2 content: "\f058"; 3 color: #00A5A8; 4} 5 6.radio-group label { 7 font-size: 16px; 8 font-size: 1.6rem; 9 font-weight: 500; 10 margin-right: 16px; 11} 12 13.radio-group .radio+.radio-icon:before { 14 content: "\f10c"; 15 font-family: "FontAwesome"; 16 color: #ccc; 17 font-size: 22px; 18 margin: 8px 8px 8px 0; 19}
###補足情報(言語/FW/ツール等のバージョンなど)
CakePHP3
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。