radio checkbox のカスタマイズ
フォームを作るとき、
|
1 |
<label><input type="radio" name="somename"> ラジオボタン</label> |
といった具合いでHTMLを書くのは普通ですが、ちょっと見た目がね～と思うことがあります。
これを、ちょっとだけ工夫することで、いい感じにカスタマイズできるので共有します。
手順（考え方）
便宜上、radio や checkbox を、ここでは「選択要素」と呼びたいと思います。
- 選択要素は非表示にする(
style="display: none") - 各選択要素に対応した
buttonまたはお好みのHTML要素を配置する( ここではbuttonを使います ) buttonが押されたら、非表示にしてある選択要素が選択されるよう JavaScript を書く
と言った感じです。
選択要素は非表示にする
手順に沿って、試しにラジオボタン3つを作ることを例にコードを書きます。
スタイル定義
|
1 2 3 |
.custom-radio { display: none; } |
HTML
|
1 2 3 |
<input type="radio" class="custom-radio" name="somename" value="1"> <input type="radio" class="custom-radio" name="somename" value="2"> <input type="radio" class="custom-radio" name="somename" value="3"> |
これで姿の見えないラジオボタンが3つ配置されます。
各選択要素に対応した button を配置する
ラジオボタンの代わりに表示させるボタンをHTMLに追加します。
|
1 2 3 4 5 6 7 8 |
<input type="radio" class="custom-radio" name="somename" value="1"> <button class="custom-button">ラジオボタン1</button> <input type="radio" class="custom-radio" name="somename" value="2"> <button class="custom-button">ラジオボタン2</button> <input type="radio" class="custom-radio" name="somename" value="3"> <button class="custom-button">ラジオボタン3</button> |
class="custom-button" は、色々と装飾を施すためにつけておきます。
続いて、ラジオボタンの代わりに表示させるボタンを、ちょっといい感じに装飾するスタイルを書きます。
飽くまでも例なので、装飾方法は自由にどうぞ。
スタイル定義
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* ボタンの形状 */ .custom-button { background-color: #fff; /* ボタンの色 */ border: 1px solid #ddd; /* 枠線 */ border-radius: 4px; /* 角に丸みを */ } /* ボタン上をホバーしたときの装飾 */ .custom-button:hover { background-color: #eee; /* ボタンの色 */ } /* ボタンに対応するラジオボタンが選択されている場合のボタンの装飾 */ .custom-radio:checked + .custom-button { background-color: #8f8; /* ボタンの色 */ } |
.custom-buttonは、ボタンそのもののスタイル。.custom-button:hoverは、マウスオーバーしたときのボタンのスタイル。.custom-radio:checked + .custom-buttonは、非表示にしてあるラジオボタンのうち、選択された状態になっているラジオボタンの隣に配置したボタンのスタイル。
ボタンが押されたらラジオボタンがクリックされるJavaScript
最後に、JavaScript です。コードの簡略化の為に jQuery を使います。
ボタンが押下されたときのイベントを登録するコードを書きます。
|
1 2 3 4 |
$(".custom-button").click(function() { // 1つ前の要素をクリック $(this).prev().click(); }); |
これでおしまいです。
ソースコード
全体のソースコードを以下に。
また、これで作ったお試しページを こちら に。
ラジオボタンは非表示ですが、ちゃんとそこにあるので、form タグでくくって普通に submit も出来ます。
.custom-radio:checked + .custom-button:before に FontAwesome のフォントアイコンを指定して、
選択された状態のボタンだけ、先頭にアイコンが表示されるようにも出来ちゃいます。
ポイントは、ラジオボタンは非表示であることと、それぞれと対になる表示用のオシャレな要素を追加すること。
あとは、そのオシャレ要素がクリックされたとき、同時に非表示のラジオボタンが選択されるようJavaScriptを作っておくことです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> /* ラジオボタンは非表示に */ .custom-radio { display: none; } /* ボタンの形状 */ .custom-button { background-color: #fff; /* ボタンの色 */ border: 1px solid #ddd; /* 枠線 */ border-radius: 4px; /* 角に丸みを */ } /* ボタン上をホバーしたときの装飾 */ .custom-button:hover { background-color: #eee; /* ボタンの色 */ } /* ボタンに対応するラジオボタンが選択されている場合のボタンの装飾 */ .custom-radio:checked + .custom-button { background-color: #8f8; /* ボタンの色 */ } </style> </head> <body> <input type="radio" class="custom-radio" name="somename" value="1"> <button class="custom-button">ラジオボタン1</button> <input type="radio" class="custom-radio" name="somename" value="2"> <button class="custom-button">ラジオボタン2</button> <input type="radio" class="custom-radio" name="somename" value="3"> <button class="custom-button">ラジオボタン3</button> <script src="path/to/jquery"></script> <script> $(function() { $(".custom-button").click(function() { // 1つ前の要素をクリック $(this).prev().click(); }); }); </script> </body> </html> |