How to color a word in a dropdown?

Question

Instead of coloring whole text, I want to color each word in a dropdown.. this don't seem to work?

<select> 
    <option> Entry <span style="color:red">One</span> </option>
    <option> Entry <span style="color:red">Two</span> </option>
    <option> Entry <span style="color:red">Three</span> </option>
</select>

score 3 · Accepted Answer · answered May 04 '12 at 10:04

That's not possible with native <select> elements.

You can only color the whole option by setting the CSS color property on the <option> tag.

The common workaround to use "rich" content inside a dropdown box is replacing it with a JS-based one (i.e. where the dropdown is simply a div containing a list of elements).

score 0 · Answer 2 · answered May 04 '12 at 10:35

Yeah you cannot select <select> elements as @ThiefMaster said. But you can always create a unordered list to create a dropdown(or even divs). I usually make with <ul>s and animate using jQuery or CSS transitions.

I have created a example dropdown. code is below or visit JS Fiddle. click here.

Or following is the code.

HTML

<ul>  
<li><a href="#">About</a> 
  <ul> 
    <li><a href="#">History</a></li> 
    <li><a href="#">Team</a></li> 
    <li><a href="#">Offices</a></li> 
  </ul> 
</li>

CSS

ul li{width: 100px;}

ul li a{
    background: red;
    padding: 5px;
    display: block;
    border-bottom: 1px solid black;
}

ul li ul li:first-child a{
    color: white;
}

ul li ul li{
   height: 0;
}

ul li:hover ul li{height: 100%;}

How to color a word in a dropdown?

2 Answers2