ラジオボタン

Web

2021年11月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「ラジオボタン」についてです。

ラジオボタンとはいったい

ラジオボタン（radio button）とは、複数ある選択肢の中から1つだけを選択させたい時に使うボタンです。

中が空白の円で、選択されている状態だと円の中に点が表示されるアレです。
お問い合わせフォームでよく見ますね。

名前の由来は昔のカーラジオの選局ボタンだそうです（Wikipediaより）

いざ実装

<input>タグを使います。
type属性にradioを指定します。

<input type="radio">選択肢A
<input type="radio">選択肢B
<input type="radio">選択肢C

name属性を設定します。
同じnameが同じカテゴリーになります。

<input type="radio" name="IceSword">選択肢A
<input type="radio" name="IceSword">選択肢B
<input type="radio" name="IceSword">選択肢C

最初から選択状態にしておきたい項目にcheckedを入れます。

<input type="radio" name="IceSword" checked>選択肢A
<input type="radio" name="IceSword">選択肢B
<input type="radio" name="IceSword">選択肢C

そう　かんけいないね

力ずくで　うばいとる

ゆずってくれ　たのむ！！

これで完成...でもいいんですが、ボタンをピンポイントでクリックしないといけないので使い勝手がイマイチです。
もうひと手間加えましょう。

まずは<input>タグにidを設定します。

<input type="radio" name="Polnareff" id="answer1" checked>答え1
<input type="radio" name="Polnareff" id="answer2">答え2
<input type="radio" name="Polnareff" id="answer3">答え3

<label>タグとfor属性を使います。
選択肢を<label>と</label>ではさんで、forにそれぞれのidを指定します。

<input type="radio" name="Polnareff" id="answer1" checked><label for="answer1">答え1</label>
<input type="radio" name="Polnareff" id="answer2"><label for="answer2">答え2</label>
<input type="radio" name="Polnareff" id="answer3"><label for="answer3">答え3</label>

これで、選択肢の文章をクリックすることでも選択できるようになりました。

答え① ハンサムのポルナレフは突如反撃のアイデアがひらめく

答え② 仲間がきて助けてくれる

答え③ かわせない。現実は非情である。

iPhoneだと・・・

iPhoneだと、見た目をCSSで装飾してもそれが反映されず、デフォルトの見た目になってしまいます。

これはこれで悪くはないのですが、なんとかしましょう。

カスタマイズ

このデフォルトの見た目を変更する方法は今のところないようです。

変えられないのなら消してしまえばいい、ということでまずはCSSでラジオボタンを非表示にします。

input[type=radio] {
  display: none;
}

labelにクラスを当てます。
擬似要素のbeforeとafterを使ってラジオボタンの見た目を再現します。

参考：三重県のデザイン会社エコムクリエーション｜CSSを使ってcheckboxやradioの見た目をキュートに変える方法

<input type="radio" name="TTDArby" id="right" checked><label for="right" class="radio">右</label>
<input type="radio" name="TTDArby" id="left"><label for="left" class="radio">左</label>
<input type="radio" name="TTDArby" id="both"><label for="both" class="radio">両方</label>
<input type="radio" name="TTDArby" id="oraora"><label for="oraora" class="radio">オラオラ</label>

.radio {
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding: 5px 25px;
  position: relative;
  width: auto;
}

.radio::before {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  content: '';
  display: block;
  height: 16px;
  left: 5px;
  margin-top: -8px;
  position: absolute;
  top: 50%;
  width: 16px;
}

.radio::after {
  background: #32bdeb;
  border-radius: 50%;
  content: '';
  display: block;
  height: 10px;
  left: 8px;
  margin-top: -5px;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: scale3d(.3, .3, 1);
  transition: transform .2s ease-in-out, opacity .2s ease-in-out;
  width: 10px;
}

input[type=radio]:checked+.radio::before {
  border-color: #666;
}

input[type=radio]:checked+.radio::after {
  opacity: 1;
  transform: scale3d(1, 1, 1);
}