2019.07.21

CSSコーディングレシピ集（フォーム編）

目次

  1. 入力欄のカスタマイズ
  2. セレクトボックス
  3. 矢印のみカスタマイズ
  4. フルカスタマイズ
  5. Choicesライブラリ
  6. ラジオボタン
  7. チェックボックス
Open

この記事では、CSS を学び始めの方を対象に、よくあるフォーム部品のコーディング方法を紹介します。

以下のシリーズ記事のフォーム編です。

入力欄のカスタマイズ

テキスト入力欄、テキストエリア、セレクトボックスのカスタマイズ例です。

See the Pen Form by Masahiro Harada (@MasahiroHarada) on CodePen.

.form-control というクラスに、角の丸さやパディングなど、フォーム部品共通のスタイルを持たせています。

ポイントは、input と select の高さを揃えるために、height に calc(1.5rem + 1rem + 2px) を指定している点でしょうか。

calc の計算の内訳は…

  • 1.5rem = 文字サイズ 1rem × 行高 1.5
  • 1rem = 上下のパディング 0.5rem × 2
  • 2px = 上下のボーダー 1px × 2

です。rem と px という、単位の異なる値を計算するために calc を利用します。

明示的に高さを指定してやらないと（パディングだけでは）、なぜか input と select の高さが揃いません。微妙な違いなので縦に並べたときは気になりませんが、横に並べたときに崩れて見えてしまいます。

calc の計算内容は、実際のデザインに合わせて設定しましょう。

セレクトボックス

次に、セレクトボックスのカスタマイズ例をさらにいくつか紹介します。

矢印のみカスタマイズ

セレクトボックスの右側に表示される矢印をカスタマイズする例です。

セレクトボックスの矢印は、各ブラウザによってそれぞれデフォルトのものが表示されます。デフォルトの矢印を隠して、擬似要素にオリジナルの矢印を表示し、絶対位置で配置するという仕組みです。

See the Pen カスタムセレクトボックス 2 by Masahiro Harada (@MasahiroHarada) on CodePen.

appearance を none に指定することで、デフォルトの矢印を隠します。

.custom-select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

ただし、IE では appearance プロパティが実装されていないため、デフォルトの矢印を消すことができません。そのままだとデフォルトの矢印とオリジナルの矢印がどちらも表示されてしまうため、JavaScript で IE 判定を行い、IE 以外の場合のみオリジナルの矢印が表示されるように対応しています。

この程度のカスタマイズは、求められることが多いかと思います。

フルカスタマイズ

選択肢のルックスまでカスタマイズしてしまう例です。JavaScript を使って、もとのセレクトボックスの内容から HTML を作り出して表示しています。

See the Pen カスタムセレクトボックス by Masahiro Harada (@MasahiroHarada) on CodePen.

ここまでの実装ではまだ不完全です。セレクトボックスの範囲外をクリックしたときに閉じませんし、アクセシビリティも考慮されていません（カスタムセレクトボックスのアクセシビリティに関しては、こちらの記事に詳しく書かれて今いました）。

Choicesライブラリ

完璧なカスタマイズを自前で実装するのは、コストパフォーマンスが良くない場合もあります。大抵の場合、ライブラリを活用するのが現実的な落とし所でしょう。

以下の例では Choices というライブラリを使っています。

See the Pen カスタムセレクトボックス 3 by Masahiro Harada (@MasahiroHarada) on CodePen.

下のセレクトボックスは複数選択可能になっています。検索機能もデフォルトで実装されていて便利です。

挙動に関してはオプションでいろいろカスタマイズできるので、マニュアルを読んだり、使い方を説明しているサイトを検索してください。

見た目に関しては、上書きスタイルを記述することでカスタマイズできます。ライブラリによって生成される HTML はクラス名が決まっているので、そちらに対してスタイルを上書きしていきます。

同様のライブラリに Select2 があり、こちらも人気のあるライブラリですが、jQuery に依存しているため、Choices の方が扱いやすいでしょう。

ラジオボタン

ラジオボタンのカスタマイズも、要求されることが多いです。
（デフォルトの見た目があまり良くないからでしょうか？）

See the Pen カスタムラジオボタン by Masahiro Harada (@MasahiroHarada) on CodePen.

まず、デフォルトの見た目を隠してしまって、label の before 擬似要素にラジオボタンとして見せたいものを配置します。今回は CSS で円を描画しましたが、backgroud-image で画像を表示することもできます。ここまでがチェックされる前の見た目ですね。

次にチェックされた後の見た目ですが、HTML の機能と CSS の合わせ技で実装します。

<input type="radio" id="left" name="sample" value="1" />
<label for="left">
  <span class="radio-text">LEFT</span>
</label>

上記の input と label は、id と for 属性で紐づけされているので、label をクリックすると、紐づいた input のチェック状態が切り替わります。

この挙動は、input がスタイル的に見えなくなっていても変わりません。この仕様を利用して、チェック時のカスタムスタイルを記述します。

.custom-radio [type="radio"]:checked + label::before {
  /* チェック後の見た目 */
}

.custom-radio [type="radio"]:checked + label::after {
  /* afterに記述してbeforeに重ねてもよい */
}

チェックされたラジオボタンは、CSS セレクタ :checked で判別できるので、チェックされたラジオボタンの隣のラベルの擬似要素に、チェック時のスタイルを定義します。

今回はかなりシンプルにしましたが、画像なども表示できて自由度が高いです。

チェックボックス

チェックボックスのカスタマイズも、ラジオボタンと同様です。

See the Pen カスタムチェックボックス by Masahiro Harada (@MasahiroHarada) on CodePen.

おそらくラジオボタンやチェックボックスについても、カスタマイズするための JavaScript ライブラリが存在すると思いますが、今回紹介した方法は簡単なので、ライブラリを導入する必要性は薄いでしょう。


以上、よくあるフォーム部品のコーディング方法をいくつか紹介しました。