Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8823

ラジオボタンにラベルを紐づける

$
0
0

ラジオボタンをデフォルトのものではなく独自でデザインしたものにしたいときは、before,afterで疑似的にラジオボタンを作成します。
(参考:https://shu-sait.com/input-label-id-for/#outline__1)

その際もとのラジオボタンの代わりになるlabelにしっかりとradioのinputタグを紐づけなければボタンとしては機能しません。

example.html
<inputid="radio_button"type="radio"><labelfor="radio_button">ラベルテキスト</label>

inputタグをlabelタグで囲むやり方でも良いようです。

example2.html
<labelfor="radio_button">ラベルテキスト
  <inputid="radio_button"type="radio"></label>

なぜこのような基本的なことに詰まったかというと、あるコードを改修する形でこの問題に面したのですが、その元のコードではこの紐づけをしなくても動いていたのです。

調べたところ読み込んでいるjsファイルにこれらを紐づけている記述がありました。

html+cssでできることは極力jsではやらないようにしよう(私の上司より)。


Viewing all articles
Browse latest Browse all 8823

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>