セレクトボックスをCSSのappearanceを使ってカスタマイズする方法

サイトのデザインによってセレクトボックスの見た目をカスタマイズしたい場合があります。その際に便利なcssプロパティがappearanceです。appearanceプロパティはユーザーが利用するプラットフォームに応じて、 要素がその環境における標準的なUI（ユーザーインターフェース）のような外観になるよう指定することができるものですが、外観の編集を行うのが容易なプロパティです。
今回はそんなappearanceプロパティを使ったセレクトボックスのカスタマイズ方法を紹介します。

appearanceを使ったカスタマイズ

セレクトボックスの見た目をappearanceで解除

HTMLで標準的なセレクトボックスを制作し、appearance:noneでその見た目をすべて解除します。見た目は以下のようになります。

See the Pen oyBKKR by hoshu_t (@hoshu_t) on CodePen.

右端の矢印など、プラットフォーム特有の見た目を消すことができます。

スタイルで装飾

ボーターの色や背景色など、cssで任意の見た目に装飾します。

See the Pen bKgJgd by hoshu_t (@hoshu_t) on CodePen.

IEでの処理

IEではappearanceプロパティだけではうまく機能しません。IE10以降であれば、下記のような追加のコードで対応可能です。

select::-ms-expand {
	display: none;
}

まとめ

ほとんどのモダンブラウザでselectタグの見た目を自由にカスタマイズすることができます。サイトデザインをプラットフォームごとに統一する必要が出た際にご利用ください。