BLOG
25年新卒 WEBエンジニア インターンシップ 受付中

CSSでinputとselectのカスタマイズをしよう(ラジオボタン・チェックボックス・セレクトボックス)

更新日:2022/06/23

Webサイトのお問い合わせフォームなどでよく利用されるform関連の要素ですが、デフォルトのデザインのままだと少し地味で使いづらいように感じてしまいます。

そこで今回は、inputタグとselectタグをCSSのみで見た目が良くなるようカスタマイズし、より入力しやすいように調整する方法について解説します。サイトデザインに合わせてform関連の要素のデザインは変更したいけれど、難しいことは苦手という方におすすめです。

デモページはこちら

form関連の要素について

フォームを作成する際に必要なHTML要素として「formタグ」というものがあります。
「formタグ」がフォームの大枠になり、その中にinputタグ、textareaタグ、selectタグといったパーツを配置してフォームを作ります。

inputタグの例

selectタグの例

それぞれのパーツについて詳しく見ていきます。

inputタグについて

inputとは、formタグで作成したフォームの中で、テキスト入力欄やボタンなどのパーツを作るためのHTML要素です。以下のように書きます。

このtype属性の値「type=””」の部分を以下のように書き換えて使うことができます。

inputタグで作れる要素のデフォルト表示一覧

・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タグについて

textareaとは、複数行のテキストを入力できる欄を作るためのHTML要素です。高さ(rows属性)と横幅(cols属性)を指定することはできますが、入力できる文字数や桁数は制限できません。制御するにはJavaScriptを使う必要があります。textareaのデザインは input type=”text” と同じように調整することができます。

selectタグについて

selectとは、formタグで作成したフォームの中で、複数の選択肢の中から一つだけ回答を選ぶセレクトボックスを作るためのHTML要素です。selectタグの中にoptionタグというものを用意し、選択肢を設定します。

カスタマイズをしていないinput・selectの見た目について

今回は上記で紹介したもののうち、ラジオボタン、チェックボックス、セレクトボックスの3つをカスタマイズします。

(2022年6月現在)

こちらはWindows環境の各ブラウザで開いた際の見た目を撮ったものになります。formタグ関連のパーツのデフォルトのものは、OSやブラウザによって見た目が異なります。どのブラウザでも同じ見た目にする場合、CSSでのカスタマイズが必要になるということです。

実践:各要素のシンプルなカスタマイズ

ということで、さっそくですがinputタグのチェックボックスとラジオボタン、そしてselectタグのカスタマイズをおこなっていきたいと思います。シンプルなカスタマイズをおこなうと、デフォルトから以下の画像の見た目に変えることができます。

シンプルなカスタマイズのデモページはこちら

ラジオボタンのカスタマイズ

まずは、ラジオボタンのカスタマイズからまとめていきます。

HTML

MDN Web docsに記載されている一般的なラジオボタンの書き方は下記の通りです。

今回は以下のように変更しています。

MDN Web docsのラジオボタンはinputとlabelが横並びになっていますが、上記のラジオボタンはlabelでinputとspanを囲うようになっています。labelは、項目名などのテキストを入力欄と紐づけることができるので、たとえ文字をspanで囲っていてもテキストをクリックするとラジオボタンにチェックが入るようになります。

各labelを囲った .radio-wrap で display: flex; にしていきます。選択肢を4つ並べ、以下のようなHTMLになりました。

最終的なソース

CSS

まずは大枠の調整です。ラジオボタンを横並びにするためのdisplay: flex;と、数が増えても折り返すようflex-wrap: wrap;を書きました。

次にラジオボタンの調整です。各選択肢の横幅を50%にしてみました。

実際の選択肢は.radioの中の.textの横幅が反映されますが、これは.textがspanでインライン要素のためです。50%すべてがクリックできる範囲になるわけではありません。すべてクリックできるようにしたい場合は.textにdisplay: block;と追記してください。

また、オリジナルのラジオボタンを表示するために、既存のinput要素は非表示にしています。このとき、display: none; や visiblity: hidden; にするとキーボードで選択できなくなるなどのアクセシビリティが悪くなるため、避けたほうが良いです。

ラジオボタンのアイコンを表示させるエリアが必要なので、padding-leftを指定しています。また、疑似要素を表示させるためにposition: relative;と記載しました。

疑似要素でラジオボタンのチェックする箇所を作ります。before要素で白い丸を大きめに作り、after要素で中の赤い丸を小さめに作っています。以下の画像のようになります。

after要素の赤い丸は opacity: 0; で不透明にしているので、現時点では表示されていません。

inputがチェックされる(input:checked)と、隣にあるspanのafter要素の透明度が1になり、チェックした際の要素(今回は赤い丸)が表示されるようにします。

また、inputがキーボードの選択などでfocus状態になるとシャドウがつくようにしました。これはfocusされていることをわかりやするためです。

最終的なソース

これで、ラジオボタンが完成しました。

チェックボックスのカスタマイズ

続いて、チェックボックスのカスタマイズです。
基本的にはラジオボタンと同じです。

HTML

MDN Web docsに記載されている一般的なチェックボックスの書き方は下記の通りです。

カスタマイズをおこないやすいよう少し書き換えます。

選択肢を4つに増やしてみました。.checkboxの中であれば選択肢は何個でも増やすことができます。

CSS

横並びにするために各labelを囲った.checkboxを display: flex; にしていきます。
また、数が増えても折り返すようflex-wrap: wrap;を書きました。

チェックボックスの各選択肢の横幅を50%にしています。また、ラジオボタンと同じく、オリジナルのチェックボックスを作るために、既存のinput要素は非表示にしています。

チェックボックスのアイコンを表示させるエリアが必要なので、padding-leftを指定しています。また、疑似要素を表示させるためにposition: relative;と記載しました。

疑似要素のbefore要素で白い四角を作り、after要素で中のチェックマークを表示すると、このようになります。

今回は記号をそのまま表示させていますが、オリジナルのアイコンを画像で作り、要素の背景画像(background-image)として設置しても綺麗に表示されるかと思います。

after要素のチェックマークはopacity: 0; で不透明にしているので、現時点では表示されていません。

inputがチェックされると、隣にあるspanのafter要素の透明度が1になり、チェックした際の要素(今回はチェックマーク)が表示されます。

また、inputがキーボードの選択などでfocus状態になるとシャドウがつくようにしました。これはfocusされていることがわかりやすくするためです。