html - 如何为下拉菜单中的单词着色？

Question

我不想为整个文本着色，而是想为下拉列表中的每个单词着色..这似乎不起作用？

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

Answer 1

<select>这对于原生元素是不可能的。

您只能通过在标签上设置 CSScolor属性来为整个选项着色。<option>

在下拉框中使用“丰富”内容的常见解决方法是将其替换为基于 JS 的内容（即下拉框只是一个包含元素列表的 div）。

Answer 2

是的，你不能<select>像@ThiefMaster 所说的那样选择元素。但是您始终可以创建一个无序列表来创建下拉列表（甚至是 div）。我通常使用<ul>s 制作并使用 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> 

​</p>

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

​</p>