IE9でセレクトボックスのカスタマイズ

Question

私は以下のCSS属性を使用して選択ボックスの矢印をカスタマイズしました。IE9.Afterをカスタマイズした他のブラウザでも機能し、デフォルトの矢印でありカスタムの矢印を適用したIE9で2つの重なった矢印が見つかります。他の方法ですべてのブラウザの選択ボックスをカスタマイズできますか？

select { 
 
    appearance: none; 
 
    -ms-appearance: none; 
 
    -o-appearance: none; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    background: url('../img/icons/list-benifit-drop.png') no-repeat; 
 
    background-position: 100%; 
 
    text-indent: 0.01px; 
 
    text-overflow: ""; 
 
    overflow: hidden; 
 
    box-shadow: none; 
 
}

<select> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
</select>

乾杯！

Answer 1

ブラウザごとに異なるスタイルシートファイルを使用して、選択ボックスのスタイルを上書きするようにしてください。

<!--/!--[if lte IE 9]--> 
    <link rel="stylesheet" href="css_for_IE9.css"> 
<!--[endif]--//--> 

さらに、ブートストラップを使用して選択ボックスをカスタマイズすることもできます。