html - 选项元素中的多种样式

Question

可能重复：
样式选择选项

我想知道是否可以在一个option元素中应用两种样式？例如，在下面的代码中，我希望我的产品名称是 stylecolor:black;而价格是另一种 style color:red; font-weight:bold;。我试过把我的价格包装起来span.price，但没有奏效。

<select>
  <option>Apple  <span class="price">$1.00</span></option>
  <option>Banana <span class="price">$2.50</span></option>
  <option>Cherry <span class="price">$1.50</span></option>
</select>

Answer 1

option样式以平台原生的方式设置样式。如果不更改标记（和/或使用 JavaScript），您将无法做您想做的事情

Answer 2

在您的 HTML 文档或外部样式表中尝试此 CSS（<style>如果您将其放在外部样式表中，请去掉标签）：

<style type="text/css">
select option { color: black; }
select option span.price { color: red; font-weight:bold; }
</style>

通过这样做，您基本上是在说“我的选择中的所有选项都应该具有黑色文本颜色”。然后，您通过说“在我的选择中的选项内具有“价格”类的任何跨度都应该具有红色文本颜色，从而覆盖这一点。