CODEWITHSUNDEEP
htmlcssxhtml
I'll-Be-Back
I'll-Be-Back

Reputation: 10828

How to color a word in a dropdown?

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>

Upvotes: 3

Views: 3851

Answers (2)

Subash
Subash

Reputation: 7266

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%;}

​

Upvotes: 0

ThiefMaster
ThiefMaster

Reputation: 318598

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).

Upvotes: 3

Related Questions