1. JSを使わずにCSS3の「appearance」を使ってセレクトボックスを自由にデザインする

JSを使わずにCSS3の「appearance」を使ってセレクトボックスを自由にデザインする

 「appearance」はCSS3で追加された新しいプロパティです。

appearanceプロパティは、ユーザーが利用するプラットフォームに応じて、 要素がその環境における標準的なUI(ユーザーインターフェース)のような外観になるよう指定する際に使用します。

出典: appearance-CSS3リファレンス - HTMLクイックリファレンス

appearanceを使ってセレクトボックスをデザインする

 セレクトボックスのCSSカスタマイズはあまり自由度が無いので、一度「appearance」プロパティでカスタマイズしやすいUIを設定し、それから反映させたいCSSを書いていきます。

 ※PCブラウザはappearanceに対応していないものもあるので、スマホ向けサイトの実装時に向いています。

CSSを反映していない状態のセレクトボックス

CSSを反映した後のセレクトボックス

 appearanceに「button」を設定して、その上からピンク背景・白文字になるようCSSを書いてみました。

もうちょっとセレクトボックスっぽく背景画像を設定する

 上の例だとセレクトボックスっぽくないので、背景画像で右側に▼マークを表示してみました。
 デフォルトの状態のままだとあまり自由度が無いセレクトボックスですが、一度appearance使ってUIを「button」タイプに変更すれば、自由にデザインを設定することができます。

U-NOTEをフォローしておすすめ記事を購読しよう
この記事を報告する