グラデーションを含む選択ボックスのスタイルを設定するにはどうすればよいですか？

Question

私はいくつかのグラデーションを持つ選択ボックスをスタイルしたいと思います。 私の問題は何とか影が追加されていることです。 this fiddleを開いて、私の言いたいことが分かります。 両方のクラスのグラデーションは同じです... なぜシャドウが選択ボックスに追加されたのか分かりませんが、解決策が見つかりません。 私を助けることができますか？

ありがとうございます。

Answer 1

select要素は、ブラウザではなくプラットフォーム/ OSによって処理されます。そのように（Chrome 8/Win XPを使用して）スタイルを設定することはできません。スタイルselectの要素を使用する必要がある場合は、通常のhtml要素（olまたはulなど）をJavaScriptと組み合わせて使用​​する必要があります。

これはどのように達成されるかを示すfor another questionのアイデアのデモをまとめたものです：JS Fiddle demo。

通常、input要素は:focus疑似要素規則でスタイル付けされていますが、要素にフォーカスがあることを示すために、「影」の意味が分かりません。これは、キーボード/マウス以外の入力デバイスでナビゲートする人のためのフォームのアクセシビリティを減らすんが

select:focus { 
    outline: 0 none transparent; 
} 

：これはで改正することができます。理想的には、あなたのサイトのデザインに合ったoutlineを定義する方が良いでしょう。