We Blog Weblog

ラジオボタン

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だと・・・

iOSのラジオボタン

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);
}

 

 

 

まとめ

ラジカセ

これで、イケてるお問い合わせフォームが作れますね!

よく見たらうちのお問い合わせフォームにラジオボタンないやんけ!

YES! YES! YES! "OH MY GOD"

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP