[CSS] スマホ向けにラジオボタンの装飾

Google先生のきっかけでモバイルフレンドリー化が急速に進みそうな様相ですが、スマートフォンのUIを作るときフォームパーツをスマホ向けに装飾したいと希望される場合が多々あります。手っ取り早くググって出てきた情報を実装するのもいいのですがなるべくシンプルに片付けたいと前々から考えていたのでお仕事ついでに自分なりに使いやすい汎用的なソースコードを用意してたので備忘録がてら。

今回はラジオボタンをスマホでタップしやすいような装飾にカスタマイズ。CSSのみで装飾しています。まずHTMLは各項目の<label>と<input>とそれを囲む<div>のみになります。

<div class="radio">
  <input type="radio" name="gender" value="1" id="male" checked>
  <label for="male">男性</label>
  <input type="radio" name="gender" value="2" id="female">
  <label for="female">女性</label>
</div>

そして装飾のCSSが以下。

.radio {
 width: 200px;
 height: 44px;
 margin: 50px auto 0;
 box-sizing: border-box;
 background-color: #f0f0f0;
 border: 1px solid #999;
 border-radius: 28px;
 letter-spacing:-0.4em;
}

label {
 float: left;
 width: 50%;
 height: 42px;
 font-size: 14px;
 line-height: 42px;
 border-radius: 28px;
 color: #999;
 text-align:center;
 letter-spacing:normal;
}

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

input[type="radio"]:checked + label {
 color: #fff;
}

input[type="radio"]:checked + label:nth-child(2) {
 background-color: #1253A4;
}

input[type="radio"]:checked + label:nth-child(4) {
 background-color: #F26964;
}

  実際のデモはこちら

個人的にはソースコードを最小限に、かつCSSだけで実装できたので満足でしょうか。そのうち  チェックボックス  セレクトメニューをスマホ向けUIパーツに装飾したものも残せればと考えています。気が向いたら。

  • 2015.05.22
  • お仕事っぽいこと