CSS : selectbox

セレクトボックスの装飾に独自のスタイルを当てる方法です。
まずはブラウザがデフォルトで付けているスタイルを無効化します。

select {
	width: 100%;
	padding: 10px;
	-webkit-appearance: none; /* Chrome,Safari */
	-moz-appearance: none; /* Firefox */
	appearance: none; /* その他 */
	border: 1px solid #999;
	background: #eee;
	background: url(arrow01.png) right 50% no-repeat, -webkit-linear-gradient(top, #fff 0%,#efebe1 100%);
	background: url(arrow01.png) right 50% no-repeat, linear-gradient(to bottom, #fff 0%,#efebe1 100%);
	background-size: 20px, 100%;
}

IEの場合には下記のように記述します。
※IE10では有効ですが、IE9,IE11では上手く効かないようです。

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

近く、WindowsVistaのサポートが切れ、Vistaの標準ブラウザである、
IE9をサポート外とする制作会社も増えてくると思いますが、
IE10、11も癖がありますので、対応にはまだまだ悩まされそうですね。

admin

cl0606

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です