セレクトボックスの装飾に独自のスタイルを当てる方法です。
まずはブラウザがデフォルトで付けているスタイルを無効化します。
1 2 3 4 5 6 7 8 9 10 11 12 |
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では上手く効かないようです。
1 2 3 |
select::-ms-expand { display: none; } |
近く、WindowsVistaのサポートが切れ、Vistaの標準ブラウザである、
IE9をサポート外とする制作会社も増えてくると思いますが、
IE10、11も癖がありますので、対応にはまだまだ悩まされそうですね。
コメント