Comment puis-je styliser un champ OPTION en utilisant le texte INLINE

Question

J'essaye de styler un SELECT/OPTION en utilisant INLINE CSS.

Le background-color ne semble pas fonctionner:

<option style='bakground-color:red'>text</option> 

Fondamentalement, je veux 3-4 options, mais chaque ligne d'avoir un fond de couleur distincte.

Tous les exemples CSS que j'ai trouvés utilisent des fichiers CSS externes, ou une section STYLE séparée au-dessus de la zone sur laquelle je travaille.

Est-il possible de faire cela en ligne?

Answer 1

Oui, si vous voulez donner le style en ligne, alors vous pouvez donner.

Le style ne fonctionne pas dans votre code parce que vous avez une faute d'orthographe.

Vous écrivez bakground-color au lieu de background:color

<select> 
 

 
    <option value="1" style="background-color:yellow">Option 1</option> 
 
    <option value="2" style="background-color:orange">Option 2</option> 
 
    <option value="3" style="background-color:red">Option 3</option> 
 
    <option value="4" style="background-color:green">Option 4</option> 
 

 
</select>

Answer 2

<option value="aa" style="background: black;">aa</option> 
<option value="bb" style="background: blue;">bb</option> 

Ceci s'affichera lorsque vous sélectionnez une option dans la liste déroulante.

Answer 3

Oui, vous pouvez le faire en ligne.

<select> 
 
    <option value="green" style="background: green;">green</option> 
 
    <option value="cyan" style="background: cyan;">cyan</option> 
 
    <option value="yellow" style="background: yellow;">yellow</option> 
 
</select>