2016/12/07  CSS  , ,

セレクトボックスの矢印を画像を使ってカスタマイズしてみました。デフォルトのスタイルを無効にする方法としてappearancenoneでセレクトボックスを非表示にできましたがIEでは表示されてしまいます。

IEセレクトボックス

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

 

IE10、IE11ではこちらの方法で消すことができるようです。

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

IEセレクトボックス