Question

是否可以使用CSS将此选项中的*设置为红色？

<option value="0">Please Make a Selection&nbsp;*</option>

Answer 1

重要的是要注意option element's content model不支持子元素，因为它只是包含“文本”。这意味着如果你保持你的HTML有效，你实际上几乎无法控制样式。

Here is a fiddle我尝试过的很多事情都没有奏效。请原谅<font>元素;我想如果写无效标记是好的，它可能在这种情况下工作（幸运的是它没有）。

Answer 2

要添加到其他答案，如果您确实需要在第一个元素上使用红色星号，请考虑将其作为选项元素上的背景图像。

Answer 3

不，不是。您唯一可以设置样式的是选项标签，您不能/不应该在选项中嵌套任何元素。

您可以做一些解决方法。

为星号（*）创建背景图片，并为其创建样式。
使用列表而不是select或datalist。

如果我记得，有一个js插件将用ul替换select并用li替换选项。从那里你可以嵌套一个元素来包装星号并从那里设置样式。再一次，你可以随时写自己的。

Answer 4

你可以这样做。将第一个option留空，将position一些文字放在其上方。

<select name="" id="">
    <option value=""></option>
    <option value="" class="bar">Option 1</option>
</select>

<div id="makeSelection">Please Make a Selection <span>*</span></div>

CSS

select{
    width:200px;
}

div#makeSelection{
    position:absolute;
    top:14px;
    left:15px;
    font-family:arial;
    font-size:13px;
}

div#makeSelection span{
    color:red;
}

示例： http://jsfiddle.net/TqpMS/

当然，你可能需要摆弄风格。您可能需要将div与position:relative;打包在一起，具体取决于您的网页设置方式。

<option> </option>中的不同彩色文本

4 个答案: