radio や checkbox のカスタマイズ

radio checkbox のカスタマイズ

フォームを作るとき、

といった具合いでHTMLを書くのは普通ですが、ちょっと見た目がね~と思うことがあります。
これを、ちょっとだけ工夫することで、いい感じにカスタマイズできるので共有します。

手順(考え方)

便宜上、radiocheckbox を、ここでは「選択要素」と呼びたいと思います。

  • 選択要素は非表示にする( style="display: none" )
  • 各選択要素に対応した button またはお好みのHTML要素を配置する( ここでは button を使います )
  • button が押されたら、非表示にしてある選択要素が選択されるよう JavaScript を書く

と言った感じです。

選択要素は非表示にする

手順に沿って、試しにラジオボタン3つを作ることを例にコードを書きます。

スタイル定義

HTML

これで姿の見えないラジオボタンが3つ配置されます。

各選択要素に対応した button を配置する

ラジオボタンの代わりに表示させるボタンをHTMLに追加します。

class="custom-button" は、色々と装飾を施すためにつけておきます。

続いて、ラジオボタンの代わりに表示させるボタンを、ちょっといい感じに装飾するスタイルを書きます。
飽くまでも例なので、装飾方法は自由にどうぞ。

スタイル定義

  • .custom-button は、ボタンそのもののスタイル。
  • .custom-button:hover は、マウスオーバーしたときのボタンのスタイル。
  • .custom-radio:checked + .custom-button は、非表示にしてあるラジオボタンのうち、選択された状態になっているラジオボタンの隣に配置したボタンのスタイル。

ボタンが押されたらラジオボタンがクリックされるJavaScript

最後に、JavaScript です。コードの簡略化の為に jQuery を使います。
ボタンが押下されたときのイベントを登録するコードを書きます。

これでおしまいです。

ソースコード

全体のソースコードを以下に。
また、これで作ったお試しページを こちら に。

ラジオボタンは非表示ですが、ちゃんとそこにあるので、form タグでくくって普通に submit も出来ます。
.custom-radio:checked + .custom-button:beforeFontAwesome のフォントアイコンを指定して、
選択された状態のボタンだけ、先頭にアイコンが表示されるようにも出来ちゃいます。

ポイントは、ラジオボタンは非表示であることと、それぞれと対になる表示用のオシャレな要素を追加すること。
あとは、そのオシャレ要素がクリックされたとき、同時に非表示のラジオボタンが選択されるようJavaScriptを作っておくことです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です