具有其他颜色的Html选项部分[重复]答案

【问题标题】：Html option part with other color [duplicate]具有其他颜色的Html选项部分[重复]
【发布时间】：2023-03-26 22:38:02
【问题描述】：

我有带有选项的选择框：

<select name="status_id">
  <option value="">Select</option>
  <option value="1">IMPORT <span style="color:red">10</span></option>
</select>

我需要用红色显示 10 号。但我的代码不起作用。我该如何解决这个问题？谢谢！

【问题讨论】：

How to style the option of an html "select" element? 的可能重复项[简而言之：无法完成]
@GrafiCode 我认为这不是完全重复的，因为 OP 正在询问如何设置选项中的部分文本（跨标签中的文本），而不是整个文本。但是，我不相信选项标签可以有孩子（即跨度），所以这会使 OP 的 HTML 无效。
这看起来像一个更合适的副本：Styling part of the OPTION text

标签： html css

【解决方案1】：

通过选择选项的值来更改选项的背景颜色

option[value='1']

option[value='1']
{
background-color:red
}

<select name="status_id">
    <option value="">Select</option>
    <option value="1">IMPORT 10</option> 
    <option value="2">IMPORT 20</option> 
    <option value="3">IMPORT 30</option> 
 </select>

【讨论】：

我认为 OP 只是想为选项中的部分文本设置样式，而不是整个内容。我认为他们只希望 10 是红色的（即跨度中的文本）。但正如我上面提到的，我认为选项中的跨度是无效的 HTML。

【解决方案2】：

HTML不支持您想要的格式选项，因为它们是 依赖于操作系统的“替换”元素，无法使用 CSS 设置样式。

如果你想格式化你的选项，你必须使用一个插件选择框。有些插件看起来像选择框，但它们包含常规的、可样式化的 HTML 元素。

例如Select2。

【讨论】：

【解决方案3】：

您不需要在代码中使用任何内容。在选择框的选项中使用 span 也是非法的，你最好看看这个here 选项元素不能有任何子元素。所以是的，这很糟糕。

【讨论】：

【解决方案4】：

一般来说，你不能。并且您不能在选项标签内使用 span 。此元素是“替换元素”的示例，这些元素与操作系统相关，不属于 HTML/浏览器。它不能通过 CSS 设置样式。

有一些替换插件/库看起来像一个但实际上由可以设置样式的常规 HTML 元素组成。

否则，您可以尝试Bootstrap Select 库或下面的库（因为它具有引导主题）。

【讨论】：