views:

103

answers:

3

Hi,

Is it possible to have different colours for different items in the dropdown list?

Eg:

Option 1 = green Option 2 = blue etc

+1  A: 

here is what you want Styling Dropdown Lists

<style tyle=text/css>
option.red {background-color: #cc0000; font-weight: bold; font-size: 12px;}
option.pink {background-color: #ffcccc;}
</style>

and

<option class="red" value= "../getting_started/">Getting Started </option>
<option class="pink" value= "../getting_started/html_intro1.htm">- Intro to HTML
 </option>
Pandiya Chendur
+1  A: 

CSS :

#option-1 {
    color: red;
}

#option-2 {
    color: green;
}

#option-3 {
    color: yellow;
}

#option-4 {
    color: blue;
}

HTML

<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>
Boris Guéry
A: 

I guess you mean a select? This should work:

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

etc

Jacob R
Sadly `:nth-child` doesn't work in IE (and there are problems with it in some other browsers).
bobince
It is a CSS3 selector which is still under development and not properly implemented in all majors browsers.
Boris Guéry