BLOG

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されていることがわかりやすくするためです。

最終的なソース

これで、チェックボックスが完成しました。

セレクトのカスタマイズ

最後に、セレクトのカスタマイズです。

HTML

MDN Web docsに記載されている一般的なセレクトの書き方は下記の通りです

今回もカスタマイズをおこないやすいよう、以下のように少し書き換えています。

selectの大枠を.selectで囲んでいます。

CSS

まずは大枠のdivをカスタマイズしていきましょう。
表示されている選択肢のほかにも選択肢がある、ということが分かりやすいよう、文字の横に三角形のアイコンを付けようと思いますが、selectタグには疑似要素をつけられないため、大枠として作った.selectにつけます。

その下準備として、position: relative; にしています。また、枠線もこちらにつけました。

続いて、select要素のCSSです。

幅や余白はここで指定しました。もともとついていたborderやoutlineは表示させないようにしています。cursor: pointer; にすることで、selectにカーソルを載せたときにポインタ(指マーク)になり、クリックできるエリアだとわかりやすいようにしました。

また、text-overflow: ellipsis; で、選択肢の文字数が多い場合は「…」で省略されるようになっています。

疑似要素で、selectの右側のほうへ下向きの三角形のアイコンを作りました。これはプルダウンであることをわかりやすいようにしたいためです。

三角形の生成は以下のようなサイトを使うと便利です。三角形の方向、形、サイズを指定するとCSSを生成してくれます。
CSS三角形作成ツール

このような見た目になりました。

最終的なソース

これで、ラジオボタン、チェックボックス、セレクトボックスのシンプルなカスタイマイズが完成しました。
このHTML/CSSのカスタイマイズをベースにすれば、自分の好みのinputやselectに調整しやすくなるかなと思います。

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

応用:お問い合わせのカスタマイズ(シンプル)

先ほどのカスタマイズをもちいて、このようなお問い合わせを作ってみたいと思います。


デモページはこちら

1テーブルを用意する

まずはテーブルを用意します。
見出しと入力欄を横並びにしたいので、tableで枠を作ってみました。
thには見出しを、tdは空欄になっていますがここにinputやselectを入れていきます。

HTML

ボタンは button タグで作っていますが、input type=”button” より button のほうが疑似要素を使うことができるため、カスタマイズがおこないやすいです。

テーブルはデフォルトだと中身の要素に応じた横幅になるため、中身が少ないとテーブル幅も狭くなります。
どのような内容でも横幅いっぱいになるよう、width:100%; を指定します。また、thとtdに枠線、余白、フォントサイズ、それぞれの横幅を指定しました。

CSS

このような見た目になりました。

2input・selectを入れる

さきほどカスタマイズしたinputやselectをそのまま入れます。
inputやselectに関しては、CSSなどを変更しないで問題ありません。

また、ボタンを少し調整します。

CSS

このような見た目になりました。
これだけでも十分使いやすいかと思いますが、最後に「必須」マークをつけてみたいと思います。

3必須マークをつける

必須かそうではないかを分かりやすくしたいので、th に .required を付けた箇所に「必須」というマークがつくようにしてみます。

HTML

thに .requreid というクラスがついたときのみ、before要素で「必須」というテキストが出るようにします。content: “必須”; と書いていますが、このように記述するとテキストがそのまま疑似要素として表示されます。

これに背景色を付けたりフォントサイズや色の調整をしたりして、アイコンのような見た目にしました。必須アイコンが出る場所はthの右端になっています。

CSS

これで、お問い合わせの完成です!


デモページはこちら

応用:お問い合わせのカスタマイズ(シンプル)MW WP Form

先ほど作ったお問い合わせのカスタマイズ(シンプル)をベースに、WordPressのお問い合わせ用プラグイン「MW WP Form」で自動的に出力されるラジオボタンとチェックボックス、セレクトのカスタマイズ方法について簡単に紹介します。

他にもMW WP Formでお問い合わせフォームを作るブログ記事がありますので、ぜひ合わせてご覧ください。

【WordPress】MW WP Formでお問い合わせフォームを作ろう!

MW WP formのラジオボタン

今回の記事で紹介したラジオボタンとは少し形式が違うので、大枠を追加して合わせたいと思います。

大枠のクラス「.mwform-radio-field horizontal-item」と選択肢の内容を表示するためのテキストのクラス「.mwform-radio-field-text」に合わせてCSS上で差し替えれば、綺麗に反映されるかと思います。

MW WP formのチェックボックス

今回の記事で紹介したチェックボックスと同じ形式で出力されます。こちらも大枠のspanと、選択肢の内容を表示するためのテキストのクラスが変わっていますが、ここをCSS上でMW WP Form用のものに差し替えれば反映されるかと思います。

MW WP formのセレクト

セレクトはMW WP Formオリジナルのクラスがつくわけではないので、何も変えなくて問題ありません。

応用:お問い合わせのカスタマイズ(ニューモーフィズム風)

先ほどまでのカスタマイズをベースに、ニューモーフィズム風のお問い合わせを作ってみようと思います。

「ニューモーフィズム(neumorphism)」とは、要素が押し出されたり窪んでいたりするように見せるデザインです。フラットデザインよりは立体的に見え、プラスチックのような質感のような表現ができます。こちらの記事も合わせてご覧ください。

【2022年 Web/UI】最新のデザイントレンド予測!

ニューモーフィズム風のラジオボタン・チェックボックス

ラジオボタンはbefore要素で円の外側に影を付け、チェックがつくとafter要素の黒丸が表示されるとともに、before要素の影が内側(inset)につくようにしました。チェックボックスも同様の動きです。

ニューモーフィズム風のセレクトボックス

こちらは内側に影がつくようにしました。これだけで、内側へ凹んでいるように見えますよね。

このような見た目になりました。
特別なことをせずに、影の見せ方だけで立体感を表現できるので、手軽に取り入れやすいのかなと思います。

デモページはこちら

ニューモーフィズムのCSSを簡単に生成できるサイトもありますので、リンクを掲載しておきます。

neumorphism.io

まとめ

formタグのよくあるパーツのカスタマイズ方法をいくつか紹介しました。
お問い合わせフォームはコーポレートサイトやポートフォリオサイトなどによく使われますので、アレンジ方法をしっかりと活用していきましょう。

今回紹介したのはラジオボタンとチェックボックス、セレクトタグの3種類のみですが、formタグにはほかにも様々な要素があります。ぜひ、ほかのformタグのカスタマイズにも挑戦してみてください!

参考
アクセシビリティで気をつけるcheckbox,radioのCSS(Qiita)
Neumorphism login form UI Design Using HTML & CSS(DEV)

FOLLOW US