Html <option>バックグラウンドカラーリニアグラデーション

Question

<select>タグのすべての<option>タグのバックグラントに異なるグラデーションカラーが含まれるようにするオプションはありますか？

CSSオプションがあります：linear-gradient(direction,color1,color2)グラデーションを設定することができますが、このオプションは各オプションのbackground-color属性には適用できません。

解決策がある場合、私は多くのブラウザ互換性があるようにそれをしたいと思いますので、それは

Answer 1

それはbackground-colorに適用されていない...クロム、モジラ、エクスプローラなどで動作します。 background-imageです。

これをサポートするブラウザ（と組み合わせて:nth-childと組み合わせると、特定のオプションを指定することができます。）。

option:nth-child(1) {background: linear-gradient(to right, red, green);} 
 
option:nth-child(2) {background: linear-gradient(to right, green, blue);} 
 
option:nth-child(3) {background: linear-gradient(to right, blue, yellow);} 
 
option:nth-child(4) {background: linear-gradient(to right, yellow, red);}

<select> 
 
    <option>option 1</option> 
 
    <option>option 2</option> 
 
    <option>option 3</option> 
 
    <option>option 4</option> 
 
</select>

---

私はFirefoxがoption要素にbackground-image設定を可能にするという考えを、と考えています。

Answer 2

異なるOSで異なる動作をするネイティブ要素をcss.sinceで実行することはできません。しかし、オンラインで入手できるプラグインがたくさんあります。私が使ったものを参考にしてくださいhttps://jqueryui.com/selectmenu/