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

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

JSを使わずにCSS3の「appearance」を使ってセレクトボックスを自由にデザインする 1番目の画像
 「appearance」はCSS3で追加された新しいプロパティです。

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

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

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

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

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

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

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

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

 appearanceに「button」を設定して、その上からピンク背景・白文字になるようCSSを書いてみました。
JSを使わずにCSS3の「appearance」を使ってセレクトボックスを自由にデザインする 4番目の画像
JSを使わずにCSS3の「appearance」を使ってセレクトボックスを自由にデザインする 5番目の画像

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

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

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