ブログ

レスポンシブWebデザインでも使える、
スタイリッシュなセレクトボックスを実現する

ブラウザで提供しているフォーム部品の中でいちばんカスタマイズが難しいのはセレクトボックス(select要素)です。

今回、CSSとアイコンフォントで実現できる簡単なものですが、レスポンシブWebデザインでも使える(レスポンシブWebデザインでなくてももちろん使える)、スタイリッシュなセレクトボックス(select要素)を書いてみましたのでご紹介します。

HTML

サンプルHTMLはこんな感じです。

  • select要素をlabel要素で囲みます。
  • 今回はアイコンフォントをCDN(コンテンツデリバリネットワーク)のサービスから読み込ませています。「entypo-down-open-mini」というクラスは、アイコンフォントを表示するのに使っています。この部分はclass名を変更したりしてください。
  • アイコンフォントはコントロールの部品を表示するのに使います。コントロールの部品を表示できるのなら別にSVGでも背景画像でも、ご自由にカスタムするのがいいでしょう。

CSS

サンプルCSSはこんな感じになります。

  • スケーラブルな表現のために、remを使って拡大縮小できるようにしています。
  • label要素のクラス「select-wrap」でスタイルを指定します。
  • select要素に「z-index:2;」、label要素のbefore擬似要素に「z-index:1;」を指定します。
  • select要素にはpadding以外は背景色、枠線などをすべて消去します。
  • select要素にはブラウザ標準スタイルを適用しないようにします。 「-webkit-appearance:none;」「-moz-appearance:none;」「appearance:none;」を指定しましょう。
  • CSS3の「calc」を使うことが必須です。あふれた部分の幅の制御に必要です。ブラウザによってコントロール部品が表示されてしまうので、コントロール部品を隠すためにわざと100%よりも大きい値にする必要があります。
  • コントロールパーツの表現のためにアイコンフォントまたは背景要素が必要です。スケーラブルな表現のためにも、アイコンフォントを使うことを推奨します。
  • ここではアイコンフォントのスタイルは書きません。配置する情報以外は自分で書いてね。分からなければ素直に背景画像使ってください。
  • 「.entypo-down-open-mini:before」のcontent属性は通常は指定してください。今回のCodepenのサンプルでは、アイコンフォントにCDNを利用しているために指定していません。

サンプル

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

CDN(コンテンツデリバリネットワーク)にあるアイコンの関係で、アイコンはあまりセレクトボックス(select要素)らしくありません。実際の案件では別なものを用意しています。

まとめ

「この記事を書かなければいけないのは、ぜんぶふとし君(誰)のせいだ。」というのはネタではありません。まだ公開したくなかったのに。

この元ネタはstackoverflowのどこかのページだったりしますが、何回か案件で使ってそのたびに改良を加えています。そもそも元ネタはCSS3のcalc使っていないです。

この手法を応用すれば、レスポンシブWebデザインで、「タップしやすいセレクトボックス(select要素)」を作ることも簡単です。通常のセレクトボックス(select要素)は縦幅が細すぎてスマートフォンではタップしにくいので、ユーザビリティの改善んもできます。

ゆめいろデザインではフォームをはじめとしたエレメントでCSS3でスタイルを作るノウハウを多数保有します。これからもちょっとずつ書いていくかもしれません。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。