Question

可能重复：
Styling select options

我想知道是否可以在option元素中应用两种样式？例如，在我的下面的代码中，我希望我的产品名称为样式color:black;，而价格为另一种样式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>

通过这样做，你基本上是说“我选择的所有选项都应该有黑色文字颜色”。然后，你通过说“在我的选择内的一个选项内的任何一个”价格“的跨度应该具有红色文本颜色来覆盖它。”

选项元素中的多个样式

2 个答案: