selectのデザインを変更する

selectのデザインを変更したいことがたまにあるのですが、他要素を使って疑似的に表示して、選択した値をJavaScriptを使ってselectに反映するという方法しか知りませんでした。
調べてみるとCSSのみで変更する方法もあるみたいなので、今回はselectのデザイン変更を試してみます。

対応ブラウザ

実装にはappearanceを使用します。
appearanceが対応しているブラウザはこちら。
ベンダープレフィックスが必要なブラウザがほとんどで、IEは11でも対応していません。

selectのデフォルトのスタイル削除

appearance: none;を指定して、selectのデフォルトのスタイルを消してみます。

HTML

<div class="select-wrapper">
	<select name="sample">
		<option value="">選択肢を選んでください</option>
		<option value="サンプルA">サンプルA</option>
		<option value="サンプルB">サンプルB</option>
		<option value="サンプルC">サンプルC</option>
	</select>
</div>

CSS

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 200px;
	margin: 0;
	border: 0;
	outline: none;
	padding: 0;
	background: transparent;
}

selectのデフォルトのスタイルを消すデモページ
Firefoxやchromeではスタイルを消す事ができましたが、IEではappearanceが非対応のため、以下のように矢印が残ってしまっています。

IEでも表示をそろえられるように対応してみます。

CSS

.select-wrapper {
	width: 200px;
	overflow: hidden;
}
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 230px;
	margin: 0;
	border: 0;
	outline: none;
	padding: 0;
	background: transparent;
}

selectに指定したい幅を親要素に指定、selectは矢印分くらい大きくwidthを指定して、親要素にoverflow: hidden;を指定して矢印を隠すようにしています。
selectのデフォルトのスタイルを消すデモページ2
これでIEでもselectのデフォルトのスタイルを消すことができました。

selectにスタイルを設定

selectはwidthを大きめに設定してしまっているので、主にselectの親要素に対してスタイルを指定していきます。

CSS

.select-wrapper {
	width: 200px;
	overflow: hidden;
	border: #999999 1px solid;
	border-radius: 5px;
	background: url(arrow.png) right center no-repeat;
}
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 230px;
	margin: 0;
	border: 0;
	outline: none;
	padding: 5px;
	background: transparent;
}

paddingだけselectに設定するようにしています。
selectにスタイルを設定のデモページ

これでとりあえず、CSSでのselectのデザイン変更ができました。
　

【参考サイト】

• レスポンシブWebデザインでも使える、スタイリッシュなセレクトボックスを実現する – ゆめいろデザイン :: フリーランス UX/UIデザイナー
• -moz-appearance – CSS | MDN