Html <option> gradient linéaire de couleur de fond

Question

Y a-t-il une option pour faire en sorte que le backgrount de chaque balise <option> d'une balise <select> contienne différentes couleurs de dégradé? Autant que j'ai pu trouver il y a une option CSS: linear-gradient(direction,color1,color2) qui permet de définir un gradient, mais cette option ne peut pas être appliquée à l'attribut background-color de chacune des options.

s'il y a une solution que je voudrais qu'il soit beaucoup navigateur compatible, il fonctionne en chrome, mozilla, Explorer, etc ...

Answer 1

Il n'est pas appliquée à la background-color. C'est le background-image.

Donc quelque chose comme ceci devrait fonctionner pour les navigateurs qui le supportent (combiné avec le :nth-child pour cibler l'option spécifique que vous voulez).

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>

---

je crois pensée, que seul Firefox permet de régler background-image sur option éléments.

Answer 2

ce n'est pas possible de faire dans css.since ses éléments natifs qui agissent différemment selon les systèmes d'exploitation. Mais il y a beaucoup de plugins disponibles en ligne. En référence celui que j'ai utilisé https://jqueryui.com/selectmenu/