<option> 标签内是不是有可能使用 <span> 标签

Posted 2023-05-09

【中文标题】<option> 标签内是不是有可能使用 <span> 标签

【英文标题】：Is there any possible using <span> tag inside <option> tag<option> 标签内是否有可能使用 <span> 标签

【发布时间】：2018-12-06 09:24:18

【问题描述】：

已尝试在选项标签中添加两个文本，其中两个文本应为不同颜色。但是，下面的代码不能正常工作。请帮助我在这个 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>

【问题讨论】：

添加<select>由浏览器渲染，每个选项只能包含text（不是html）。如果您想要更花哨的东西，则必须自己编写或使用插件。

@freedomn-m ，感谢您的评论。我是新手。您对寻找插件有什么建议吗？

@passionFinder 你在找这样的东西吗>jsfiddle.net/YBr8S/2

@AravindS ，我需要为选项内的两个文本设置两种不同的字体颜色（不是背景颜色）。例如，“Offers”应为默认颜色，“New”跨度内的文本应为红色。希望它澄清。我们对此有什么建议吗？

@passionFinder 你能试试这个吗？ jsfiddle.net/USdjj

【参考方案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>

【讨论】：

我需要为选项内的两个文本设置两种不同的字体颜色。例如，“Offers”应为默认颜色，“New”跨度内的文本应为红色。希望它澄清。我们对此有什么建议吗...

【参考方案2】：

没有。您不能在<option> 中使用<span> 标记。但是你可以在这里使用 CSS 技巧。

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

样式如下：

<style>
.yellowText::after
      content: 'New';
      height: 25px;
      width: auto;
      color: yellow;
      font-size: 14px;

.redText::after
      content: 'New';
      height: 25px;
      width: auto;
      color: red`enter code here`;
      font-size: 14px;

</style>

【讨论】：

嗨@Ashutosh，也尝试过CSS......提到的样式代码也没有显示在检查元素中......你能帮我吗