Geek asks and answers

How to color a word in the drop-down list?

Instead of coloring all the text, I want to color each word in the drop-down list. Doesn't this 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>
+3
source share
2 answers

This is not possible with native <select>elements.

You can only color the entire parameter by setting the CSS property colorin the tag <option>.

A common workaround for using “rich” content in a drop-down list is replacing it with a JS-based (i.e. where the drop-down list is just a div containing a list of items).

+3
source

, <select>, @ThiefMaster. ( div). <ul> jQuery CSS-.

. JS Fiddle. .

.

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

0

More articles:


All Articles