jquery - 是否有可能在 <option> 标签内使用 <span> 标签

Question

已尝试在选项标签中添加两个文本，其中两个文本应使用不同的颜色。但是，下面的代码无法正常工作。请帮助我在这个 css 或 js 中添加什么。如果有任何插件可以使用，请建议我。

<select name="dropdown" title="Corporate Select" class="custom-select" id="target" aria-label="Corporate Select">
                <option selected>Select</option>
                <option value="">Offers<span class="calc">New </span></option>
                <option value="">Discounts<span class="calc">New </span></option>
</select>

<style>
 option span.calc {
 color: red;
}
</style>

Answer 1

如果你想改变文本背后的背景试试这个:

<select name="dropdown" title="Corporate Select" class="custom-select" id="target" aria-label="Corporate Select">
            <option selected>Select</option>
            <option value="" style="background-color: yellow;">Offers<span class="calc">New </span></option>
            <option value="" style="background-color:red;">Discounts<span class="calc">New </span></option>

或者，如果您只是希望文本具有不同的颜色:

<select name="dropdown" title="Corporate Select" class="custom-select" id="target" aria-label="Corporate Select">
            <option selected>Select</option>
            <option value="" style="color: yellow;">Offers<span class="calc">New </span></option>
            <option value="" style="color:red;">Discounts<span class="calc">New </span></option>