JavaScriptを使わずCSSのみでフォームのSELECTタグを装飾する方法

JavaScriptを使わずCSSのみでフォームのSELECTタグを装飾する方法です。

以前に、jQueryのプラグインを利用してSELECTタグを装飾する方法を紹介しました。
フォームセレクトを装飾するjQueryベースプラグイン「customSelect」

それまでは、フォームのCSSのみでの装飾は困難だったので、スクリプトを利用する必要がありました。
しかし、最近ではモダンブラウザのCSS3対応が進み、現在ではほとんどの環境で、スタイルのみで好みのデザインへ変更することができるようになりました。

これがデフォルトのフォームSELETタグの表示です。

フォームはブラウザによって表現がさまざまですが、これまでネックになっていたのは、右端に付いている「▼」が消せなかったことです。

しかし、さまざまな環境でCSS3への対応が進み、プロパティ「appearance: none;」を指定することで「▼」を消すことができるようになりました。

select{
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}

ちなみに、IE10は「appearance」に対応していないようで、別途用意されている以下のプロパティで矢印を消すことができるようです。

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

あとは自由にスタイルでデザインできますね。以下に1例あげておきます。

select{
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: rgb(255, 152, 0, 0.1);
	border: 1px solid #dddddd;
	border-radius: 5px;
	padding: 5px 20px;
	color: #666666;
}

手持ちのiPhoneやAndroidでも動作確認済みです。
背景画像なども設置できるので、これからは思い通りのデザインにできますね。