ブラウザ（Webkit、IE、Firefox）選択のための背景を変更する

Question

ウェブサイトのデフォルトグラデーションの背景を取り除こうとしています。私は - ウェブキット - appereanceを設定する場合は知っている：これは可能ですが、私はドロップダウンで矢印や他の行動を失うことはできません。 -webkit-appearance：menulistを使って背景を白に設定する方法はありますか？

これは私が持っているものですが、背景が

.ius select{ 
    -webkit-appearance: menulist; 
    -moz-appearance: menulist; 
    appearance: menulist; 
    height:32px; 
    border:1px solid #c8c8c8; 
    width:250px; 
    background:rgba(255, 255, 255, 0); 
    background: transparent; 
} 

Answer 1

にプロパティは、一般的に二つのもののために使用され、外観は変更されません。他の要素

または削除のネイティブスタイルを模倣

1. をすべてのネイティブスタイル（外観をなしに設定）

それはかなり奇妙なプロパティです。

ネイティブのデフォルトの背景を削除したいので、外観をnoneに設定する必要があります。これにより、すべてのスタイリング（グラデーションとデフォルトの矢印アイコン）が削除されます。しかし、これは大きな問題ではありません。なぜなら、単にCSSを使用してより多くのスタイリングを適用できるからです。

<select id="menulist"> 
    <option value="one">One</option> 
    <option value="two">Two</option> 
    <option value="three">Three</option> 
</select> 

とCSS：マークアップで

#menulist { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    height:20px; 
    border:1px solid rgb(156,156,156); 
    width:250px; 
    text-indent: 8px; 
    /** 
    * replace this background url with a proper arrow asset 
    **/ 
    background: url('http://placehold.it/5x10') no-repeat 95% 50%; 
} 

フルjsfiddleがここにあります：http://jsfiddle.net/gwwar/vR53Q/2/

このプロパティはChromeのみ、SafariとFirefoxの上でサポートされているので、私はおそらく別のルートを行くと、ネイティブの選択スタイルを使用するか、あなたが完全にコントロールしているドロップダウンコンポーネントを使用します。