HTML Select DropDown Multiple Color List

Is it possible to have different colors for different elements in a drop-down list?

For example:

Option 1 = Green
Option 2 = Blue
etc.

+7
html colors html-select
source share
3 answers

that's what you want Split Layout Lists

<style type="text/css"> option.red {background-color: #cc0000; font-weight: bold; font-size: 12px;} option.pink {background-color: #ffcccc;} </style> <select name=colors> <option class="red" value= "../getting_started/">Getting Started </option> <option class="pink" value= "../getting_started/html_intro1.htm">- Intro to HTML </option> </select> 
+10
source share

CSS and HTML

 #option-1 { color: red; } #option-2 { color: green; } #option-3 { color: yellow; } #option-4 { color: blue; } 
 <select> <option id="option-1">Option 1</option> <option id="option-2">Option 2</option> <option id="option-3">Option 3</option> <option id="option-4">Option 4</option> </select> 
+3
source share

Think you mean select ? This should work:

 option:nth-child(1) { background: green; } option:nth-child(2) { background: blue; } 

etc.

+1
source share

All Articles