メールフォームのradioボタンを縦に並べたい(input type="radio">と<label>を他のタグでラップしたい)

トップ > テーマ制作 > メールフォームのradioボタンを縦に並べたい(input type="radio">と<label>を他のタグでラップしたい)

» Garyuten > メールフォームのradioボタンを縦に並べたい(input type="radio">と<label>を他のタグでラップしたい) @ 2018/4/22 21:21
seto > Re: メールフォームのradioボタンを縦に並べたい(input type="radio">と<label>を他のタグでラップしたい) @ 2018/4/23 10:19
seto > Re: メールフォームのradioボタンを縦に並べたい(input type="radio">と<label>を他のタグでラップしたい) @ 2018/4/23 10:37

Garyuten > メールフォームのradioボタンを縦に並べたい(input type="radio">と<label>を他のタグでラップしたい) @ 2018/4/22 21:21
■ BaserCMSのバージョン：4.1.0.1 baserCMS3系では、確か radioボタン、checkboxはlabelと合わせてspanタグなどでラップされた状態で出力されていたと記憶しています。 4系ではradioボタンだけらラップされておらず、CSS制御ができないじょうたいなので改善お願いします。 ▼現在のHTML出力 `<input type="radio" name="data[MailMessage][maker_type]" id="MailMessageMakerTypeAAA" value="AAA" class=""> <label for="MailMessageMakerTypeAAA">AAA</label>` ↓ ▼希望のHTML出力 `<div class="radio"> <input type="radio" name="data[MailMessage][maker_type]" id="MailMessageMakerTypeAAA" value="AAA" class=""> <label for="MailMessageMakerTypeAAA">AAA</label> </div>` 希望の理由 1. checkboxの場合は inputとlabelをラップするタグがあり、縦に並べるのは容易 `<div class="checkbox"><input type="checkbox" name="data[MailMessage][category][]" value="メイカー（モノづくり）" id="MailMessageCategoryメイカーモノづくり"> <label for="MailMessageCategoryメイカーモノづくり">メイカー（モノづくり）</label></div>` 2. 現状だと横並びだけとなり、意図しない折返しとなる。またCSSで制御できない

Garyuten > メールフォームのradioボタンを縦に並べたい(input type="radio">と<label>を他のタグでラップしたい) @ 2018/4/22 21:21

■ BaserCMSのバージョン：4.1.0.1

baserCMS3系では、確か radioボタン、checkboxはlabelと合わせてspanタグなどでラップされた状態で出力されていたと記憶しています。
4系ではradioボタンだけらラップされておらず、CSS制御ができないじょうたいなので改善お願いします。

▼現在のHTML出力


<input type="radio" name="data[MailMessage][maker_type]" id="MailMessageMakerTypeAAA" value="AAA" class="">
<label for="MailMessageMakerTypeAAA">AAA</label>

↓
▼希望のHTML出力


<div class="radio">
<input type="radio" name="data[MailMessage][maker_type]" id="MailMessageMakerTypeAAA" value="AAA" class="">
<label for="MailMessageMakerTypeAAA">AAA</label>
</div>

希望の理由

1. checkboxの場合は inputとlabelをラップするタグがあり、縦に並べるのは容易

<div class="checkbox"><input type="checkbox" name="data[MailMessage][category][]" value="メイカー（モノづくり）" id="MailMessageCategoryメイカーモノづくり">&nbsp;<label for="MailMessageCategoryメイカーモノづくり">メイカー（モノづくり）</label></div>

2. 現状だと横並びだけとなり、意図しない折返しとなる。またCSSで制御できない

フラット表示

前のトピック | 次のトピック

メールフォームのradioボタンを縦に並べたい(input type="radio">と<label>を他のタグでラップしたい)

キーワード検索