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>元素无法做到这一点。

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

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

Answer 2

是的，你不能像@ThiefMaster那样选择<select>元素。但是你总是可以创建一个无序列表来创建一个下拉列表（甚至是div）。我通常用<ul>制作并使用jQuery或CSS过渡动画。

我创建了一个示例下拉列表。代码在下面或访问JS Fiddle。 click here

以下是代码。

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

如何在下拉列表中为单词着色？

2 个答案: