「appearance」はCSS3で追加された新しいプロパティです。
appearanceプロパティは、ユーザーが利用するプラットフォームに応じて、 要素がその環境における標準的なUI（ユーザーインターフェース）のような外観になるよう指定する際に使用します。
appearanceを使ってセレクトボックスをデザインする
セレクトボックスのCSSカスタマイズはあまり自由度が無いので、一度「appearance」プロパティでカスタマイズしやすいUIを設定し、それから反映させたいCSSを書いていきます。
※PCブラウザはappearanceに対応していないものもあるので、スマホ向けサイトの実装時に向いています。
CSSを反映していない状態のセレクトボックス
CSSを反映した後のセレクトボックス
appearanceに「button」を設定して、その上からピンク背景・白文字になるようCSSを書いてみました。
もうちょっとセレクトボックスっぽく背景画像を設定する
上の例だとセレクトボックスっぽくないので、背景画像で右側に▼マークを表示してみました。
デフォルトの状態のままだとあまり自由度が無いセレクトボックスですが、一度appearance使ってUIを「button」タイプに変更すれば、自由にデザインを設定することができます。
（提供： casemobile〜スマホコンテンツ開発ブログ）
はてブU-NOTEをフォローしておすすめ記事を購読しよう