ブログ

「CSS Calc」と​「multiple background image」で​オリジナルな​セレクトボックスを実現する

ブラウザで提供しているフォーム部品の中でいちばんカスタマイズが難しいのはセレクトボックス(select要素)です。
今回、CSSと背景画像で実現できるセレクトボックス(select要素)のカスタマイズ方法ご紹介します。

ブラウザで提供しているフォーム部品の中でいちばんカスタマイズが難しいのはセレクトボックス(select要素)です。今回、CSSと背景画像で実現できるセレクトボックス(select要素)のカスタマイズ方法ご紹介します。

HTMLに余計な要素を入れずにマークアップ

セレクトボックスのカスタマイズは、以前に「レスポンシブ​Webデザインでも​使える、​スタイリッシュな​セレクトボックスを​実現する」という記事で書いたのですが、今回はHTMLには余計なマークアップは行いません。CSSだけで実現でき、JavaScriptも一切使わずに実現可能です。

メリットとしては、Select要素だけで完結することにより、ユーザーがセレクトボックスに何かアクションを起こす時にも、アクションに応じた表示を行うことが困難ではありません。

サンプル

実際に動くサンプルはこちらです。

HTMLはデフォルトそのままで、div要素やlabel要素で包んだりすることもありません。スタイルシートだけでカスタマイズを実現しています。

「CSS Calc」と「multiple background image」を利用してコントロールパーツを作成する

今回は、「レスポンシブ​Webデザインでも​使える、​スタイリッシュな​セレクトボックスを​実現する」とは違い、コントロールパーツを表示するのに背景画像を利用します。背景画像は、select要素のグラデーションにまず使います。

次に、上下の矢印などのコントロールを背景画像で指定します。
CSSの背景画像を利用するbackgroundプロパティには、「multiple background image」という、複数の画像を利用するプロパティを利用することが可能です。

今回は矢印アイコンをSVGで作成し、BASE64エンコーディングしました。
配置位置はCSS Calcで指定します。キーワード指定では、背景画像の配置位置を自由に指定できません。また、フォーカスした時には、背景色はグラデーションにしないので、「multiple background image」は利用しません。

スタイルを実現するポイント

今回のスタイルを実現するポイントは次の通りです。

  • select要素にはブラウザ標準スタイルを適用しないようにします。 「-webkit-appearance:none;」「-moz-appearance:none;」「appearance:none;」を指定しましょう。
  • 「CSS Calc」を使うことが必須です。背景画像の位置調整のために必要です。
  • コントロールパーツの表現のために背景要素が必要です。スケーラブルな表現のためにも、SVG画像をエンコードして利用することを推奨します。
  • 単色塗りつぶしと矢印アイコン背景画像だけの手法でももちろん利用することは可能です。

まとめ

CSS Calcは、JavaScriptを利用しなくても、Webデザインの可能性が大いに広がるプロパティです。個人の意見ですが、これからの高度なCSSサイトを作るのには、CSS Gridやflexboxよりも重要なプロパティだと思っています。

私たちのクライアントの案件では、CSS Calcを利用したスライダー、またレスポンシブタイプセッティングで文字サイズが伸縮しても画像の比率を保つ画像リストを作成して提供したりしています。

CSS Calcを利用したコンテンツサンプルはこれからもちょっとずつ書いていくかもしれません。