ブログ

読んで思い出す。忘れるために書く

トップ > HTML > <label/> + <input type="radio"/> で任意の文字・画像を選択肢代わりに表示する

<label/> + <input type="radio"/> で任意の文字・画像を選択肢代わりに表示する

HTML CSS

この記事は「口コミサイトの星(★★★☆☆)をCSSだけで実装してみた - Qiita」を見て、その中で使われているテクニックを一部解読したもの

(本文に Slim を使いたかったけど Syntax Highlight 対応して無くて見辛くてツライので、 HTML で書いた)

導入

<input/> を用いる時は、 <label/> と併用することでこの2つの要素を関連付けられる

関連付けによってラベルのクリックによる入力可能状態への移行を機能させられる

<input/> をただ単体で使用するのではなく、ラベルと併用することで、ラベルとインプットの関連性...ユーザは何を入力すべきか...の明示ができて、使い勝手の良さにつながる

<!-- ラベルはインプットのID 値と関連付けられて、
「Memo」をクリックすると入力可能状態へ移行する -->
<label for="my-input">Memo</label>
<input id="my-input" type="text" name="memo" id="my-input">

f:id:innocent-zero:20180219061807p:plain

今回はこれを応用する

ゴール

この、「ラベルをクリックすると <input/> を選択できる」を利用することで、あたかも「ラベルに表示させた文字や画像を選択可能にする」、といった動作にできる

これが動作するまでを書いていく

手順

ここからは、非表示化した <input/> と、それと関連付けた <label/> の連携方法について書く

大まかな手順として：

  • ラジオボタンを複数用意する
  • 各ボタンとラベルとを関連付ける
  • ラベルに任意の文字や画像を使用する(ここでは画像を用いる)
  • CSS でラジオボタンを非表示化

ラジオボタンを見えなくしても、なぜかラベルとの関連付けは失われないので、ボタンは問題なく選択可能なままになる

なにもない状態

実際に作っていく上で、次のようなHTML をベースとして用いる

<div class="selection-group">
  <input id="a" type="radio" name="rate" value="a">
  <input id="b" type="radio" name="rate" value="b">
  <input id="c" type="radio" name="rate" value="c">
</div>

ラジオボタンが表示された

f:id:innocent-zero:20180219063642p:plain

ラベルと関連付ける

<div class="selection-group">
  <input id="a" type="radio" name="rate" value="a">
  <label for="a"></label>

  <input id="b" type="radio" name="rate" value="b">
  <label for="b"></label>

  <input id="c" type="radio" name="rate" value="c">
  <label for="c"></label>
</div>

ラベルの内容は空なので、見た目の変化もなし

f:id:innocent-zero:20180219063642p:plain

ラベルに画像を追加

<div class="selection-group">
  <input id="a" type="radio" name="rate" value="a">
  <label for="a">
    <img src="//placehold.it/90x90">
  </label>

  <input id="b" type="radio" name="rate" value="b">
  <label for="b">
    <img src="//placehold.it/90x90">
  </label>

  <input id="c" type="radio" name="rate" value="c">
  <label for="c">
    <img src="//placehold.it/90x90">
  </label>
</div>

(ラベルの中にあるので、) 画像をクリックすることでラジオボタンが選択できるようになった

f:id:innocent-zero:20180219071301p:plain

CSS でラジオボタンを非表示化

.selection-group input[type="radio"] {
  display: none;
}

f:id:innocent-zero:20180219071507p:plain

このままだと実際に動いてくれているのか確認しづらいので、確認用の CSS を追記する

動作確認用のCSS 追記

/* 画像部分に余白を持たせる */
label img {
  margin: 3px;
  padding: 8px;
}

/* 選択されたラジオボタンの画像の背景をオレンジ色に変える */
.selection-group input[type="radio"]:checked + label img {
  background: orange;
}

画像をクリックすることでラジオボタンが選択できるようになった

f:id:innocent-zero:20180219071032g:plain

完成

出来上がったものがこちら

https://codepen.io/gouf/pen/XZZXPBcodepen.io

Links