CSSでinputとselectのカスタマイズをしよう（ラジオボタン・チェックボックス・セレクトボックス）
更新日：2022/06/23
Webサイトのお問い合わせフォームなどでよく利用されるform関連の要素ですが、デフォルトのデザインのままだと少し地味で使いづらいように感じてしまいます。
そこで今回は、inputタグとselectタグをCSSのみで見た目が良くなるようカスタマイズし、より入力しやすいように調整する方法について解説します。サイトデザインに合わせてform関連の要素のデザインは変更したいけれど、難しいことは苦手という方におすすめです。
目次
form関連の要素について
フォームを作成する際に必要なHTML要素として「formタグ」というものがあります。
「formタグ」がフォームの大枠になり、その中にinputタグ、textareaタグ、selectタグといったパーツを配置してフォームを作ります。
inputタグの例
|
1 2 3 4 5 |
<form> <input type="text"> </form> |
selectタグの例
|
1 2 3 4 5 6 7 8 9 |
<form> <select> <option>選択肢</option> <option>選択肢</option> <option>選択肢</option> </select> </form> |
それぞれのパーツについて詳しく見ていきます。
inputタグについて
inputとは、formタグで作成したフォームの中で、テキスト入力欄やボタンなどのパーツを作るためのHTML要素です。以下のように書きます。
|
1 2 3 4 5 |
<form> <input type="text"> </form> |
このtype属性の値「type=””」の部分を以下のように書き換えて使うことができます。
|
1 2 3 |
<input type="この部分を書き換えます"> |
・1行のテキスト入力欄（type=”text”）
・1行の数字のみのテキスト入力欄（type=”number”）
・1行のメールアドレス入力欄（type=”email”）
・1行のURL入力欄（type=”url”）
・1行の電話番号入力欄（type=”tel”）
・1行のパスワード入力欄（type=”password”）
・日付の入力欄（type=”date”）
・時間の入力欄（type=”time”）
・ラジオボタン（type=”radio”）
・チェックボックス（type=”checkbox”）
・汎用的なボタン（type=”button”）
・送信ボタン（type=”submit”）
・ファイルのアップロード（type=”file”）
・スライダー（type=”range”）
・色の入力欄（type=”color”）
textareaタグについて
|
1 2 3 |
<textarea rows="入力欄の高さの数値" cols="入力欄の幅の数値"></textarea> |
textareaとは、複数行のテキストを入力できる欄を作るためのHTML要素です。高さ（rows属性）と横幅（cols属性）を指定することはできますが、入力できる文字数や桁数は制限できません。制御するにはJavaScriptを使う必要があります。textareaのデザインは input type=”text” と同じように調整することができます。
selectタグについて
|
1 2 3 4 5 6 7 |
<select> <option>選択肢</option> <option>選択肢</option> <option>選択肢</option> </select> |
selectとは、formタグで作成したフォームの中で、複数の選択肢の中から一つだけ回答を選ぶセレクトボックスを作るためのHTML要素です。selectタグの中にoptionタグというものを用意し、選択肢を設定します。
カスタマイズをしていないinput・selectの見た目について
今回は上記で紹介したもののうち、ラジオボタン、チェックボックス、セレクトボックスの3つをカスタマイズします。
|
1 2 3 4 5 6 7 8 9 10 |
//ラジオボタン <input type="radio"> //チェックボックス <input type="checkbox"> //セレクトボックス <select></select> |
（2022年6月現在）
こちらはWindows環境の各ブラウザで開いた際の見た目を撮ったものになります。formタグ関連のパーツのデフォルトのものは、OSやブラウザによって見た目が異なります。どのブラウザでも同じ見た目にする場合、CSSでのカスタマイズが必要になるということです。
実践：各要素のシンプルなカスタマイズ
ということで、さっそくですがinputタグのチェックボックスとラジオボタン、そしてselectタグのカスタマイズをおこなっていきたいと思います。シンプルなカスタマイズをおこなうと、デフォルトから以下の画像の見た目に変えることができます。
ラジオボタンのカスタマイズ
まずは、ラジオボタンのカスタマイズからまとめていきます。
HTML
MDN Web docsに記載されている一般的なラジオボタンの書き方は下記の通りです。
|
1 2 3 4 |
<input type="radio" id="huey" name="drone" value="huey" checked> <label for="huey">Huey</label> |
今回は以下のように変更しています。
|
1 2 3 4 5 6 |
<label> <input type="radio" name="answer" value="1"> <span class="text">選択肢1</span> </label> |
MDN Web docsのラジオボタンはinputとlabelが横並びになっていますが、上記のラジオボタンはlabelでinputとspanを囲うようになっています。labelは、項目名などのテキストを入力欄と紐づけることができるので、たとえ文字をspanで囲っていてもテキストをクリックするとラジオボタンにチェックが入るようになります。
各labelを囲った .radio-wrap で display: flex; にしていきます。選択肢を4つ並べ、以下のようなHTMLになりました。
最終的なソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="radio-wrap"> <label> <input type="radio" name="answer" value="1"> <span class="text">選択肢1</span> </label> <label> <input type="radio" name="answer" value="2"> <span class="text">選択肢2</span> </label> <label> <input type="radio" name="answer" value="3"> <span class="text">選択肢3</span> </label> <label> <input type="radio" name="answer" value="4"> <span class="text">選択肢4</span> </label> </div> |
CSS
まずは大枠の調整です。ラジオボタンを横並びにするためのdisplay: flex;と、数が増えても折り返すようflex-wrap: wrap;を書きました。
|
1 2 3 4 5 6 |
.radio-wrap { display: flex; flex-wrap: wrap; } |
次にラジオボタンの調整です。各選択肢の横幅を50%にしてみました。
|
1 2 3 4 5 6 7 8 9 10 11 |
.radio-wrap label { width: 50%; } .radio-wrap label input[type="radio"] { opacity: 0; appearance: none; position: absolute; } |
実際の選択肢は.radioの中の.textの横幅が反映されますが、これは.textがspanでインライン要素のためです。50%すべてがクリックできる範囲になるわけではありません。すべてクリックできるようにしたい場合は.textにdisplay: block;と追記してください。
また、オリジナルのラジオボタンを表示するために、既存のinput要素は非表示にしています。このとき、display: none; や visiblity: hidden; にするとキーボードで選択できなくなるなどのアクセシビリティが悪くなるため、避けたほうが良いです。
ラジオボタンのアイコンを表示させるエリアが必要なので、padding-leftを指定しています。また、疑似要素を表示させるためにposition: relative;と記載しました。
|
1 2 3 4 5 6 7 8 |
.radio-wrap label .text { display: inline-block; //エリアの幅すべてをクリックできるようにするにはここを block にする position: relative; padding-left: 26px; line-height: 2.2; } |
疑似要素でラジオボタンのチェックする箇所を作ります。before要素で白い丸を大きめに作り、after要素で中の赤い丸を小さめに作っています。以下の画像のようになります。
after要素の赤い丸は opacity: 0; で不透明にしているので、現時点では表示されていません。
|
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 |
.radio-wrap label .text::before { position: absolute; top: 8px; left: 0; width: 18px; height: 18px; border: 1px solid #eee; background: #fff; content: ""; border-radius: 50%; } .radio-wrap label .text::after { position: absolute; top: 11px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background-color: #ca353b; content: ""; opacity: 0; transition: all 0.3s; } |
inputがチェックされる（input:checked）と、隣にあるspanのafter要素の透明度が1になり、チェックした際の要素（今回は赤い丸）が表示されるようにします。
|
1 2 3 4 5 6 7 8 |
.radio-wrap label input:focus + span::before { box-shadow: 0 0 4px #ca353b; } .radio-wrap label input:checked + span::after { opacity: 1; } |
また、inputがキーボードの選択などでfocus状態になるとシャドウがつくようにしました。これはfocusされていることをわかりやするためです。
最終的なソース
|
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 50 51 52 53 54 55 56 57 58 59 60 |
/*--------------- radio -----------------*/ .radio-wrap { display: flex; flex-wrap: wrap; } .radio-wrap label { width: 50%; } .radio-wrap label input[type="radio"] { opacity:0; appearance: none; position: absolute; } .radio .text { display: inline-block; position: relative; padding-left: 26px; line-height: 2.2; } .radio-wrap label .text::before { position: absolute; top: 8px; left: 0; width: 18px; height: 18px; border: 1px solid #eee; background: #fff; content: ""; border-radius: 50%; } .radio-wrap label.text::after { position: absolute; top: 11px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background-color: #ca353b; content: ""; opacity: 0; transition: all 0.3s; } .radio-wrap label input:focus + span::before { box-shadow: 0 0 4px #ca353b; } .radio-wrap label input:checked + span::after { opacity: 1; } |
これで、ラジオボタンが完成しました。
チェックボックスのカスタマイズ
続いて、チェックボックスのカスタマイズです。
基本的にはラジオボタンと同じです。
HTML
MDN Web docsに記載されている一般的なチェックボックスの書き方は下記の通りです。
|
1 2 3 4 5 6 |
<div> <input type="checkbox" id="scales" name="scales" checked> <label for="scales">Scales</label> </div> |
カスタマイズをおこないやすいよう少し書き換えます。
|
1 2 3 4 5 6 |
<label> <input type="checkbox" name="check01" value="選択肢"> <span class="text">選択肢</span> </label> |
選択肢を4つに増やしてみました。.checkboxの中であれば選択肢は何個でも増やすことができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="checkbox"> <label> <input type="checkbox" name="check01" value="選択肢"> <span class="text">選択肢</span> </label> <label> <input type="checkbox" name="check02" value="選択肢"> <span class="text">選択肢</span> </label> <label> <input type="checkbox" name="check03" value="選択肢"> <span class="text">選択肢</span> </label> <label> <input type="checkbox" name="check04" value="選択肢"> <span class="text">選択肢</span> </label> </div> |
CSS
横並びにするために各labelを囲った.checkboxを display: flex; にしていきます。
また、数が増えても折り返すようflex-wrap: wrap;を書きました。
|
1 2 3 4 5 6 |
.checkbox { display: flex; flex-wrap: wrap; } |
チェックボックスの各選択肢の横幅を50%にしています。また、ラジオボタンと同じく、オリジナルのチェックボックスを作るために、既存のinput要素は非表示にしています。
|
1 2 3 4 5 6 7 8 9 10 11 |
.checkbox label { width: 50%; } .checkbox input[type="checkbox"] { opacity:0; appearance: none; position: absolute; } |
チェックボックスのアイコンを表示させるエリアが必要なので、padding-leftを指定しています。また、疑似要素を表示させるためにposition: relative;と記載しました。
|
1 2 3 4 5 6 7 8 |
.checkbox .text { display: inline-block; position: relative; padding-left: 26px; line-height: 2.2; } |
疑似要素のbefore要素で白い四角を作り、after要素で中のチェックマークを表示すると、このようになります。
今回は記号をそのまま表示させていますが、オリジナルのアイコンを画像で作り、要素の背景画像（background-image）として設置しても綺麗に表示されるかと思います。
after要素のチェックマークはopacity: 0; で不透明にしているので、現時点では表示されていません。
|
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 |
.checkbox .text::before { position: absolute; top: 8px; left: 0; width: 18px; height: 18px; border: 1px solid #eee; background: #fff; content: ""; transition: all 0.3s; } .checkbox .text::after { position: absolute; top: 8px; left: 0; width: 18px; height: 18px; color: #ca353b; font-size: 14px; display: flex; align-items: center; justify-content: center; content: "✔"; opacity: 0; transition: all 0.3s; } |
inputがチェックされると、隣にあるspanのafter要素の透明度が1になり、チェックした際の要素（今回はチェックマーク）が表示されます。
また、inputがキーボードの選択などでfocus状態になるとシャドウがつくようにしました。これはfocusされていることがわかりやすくするためです。