选项元素中的多种样式[重复]答案

【问题标题】：Multiple Styles In Option Element [duplicate]选项元素中的多种样式[重复]
【发布时间】：2012-12-05 02:36:35
【问题描述】：

可能重复：
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>

【问题讨论】：

@Diodeus 抱歉，我错过了那个帖子 :(

标签： html css

【解决方案1】：

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

【讨论】：

我就是这么想的 :( 感谢您验证我的预感。

【解决方案2】：

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

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

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

【讨论】：