Можно ли использовать тег <span>внутри тега <option>

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

Нет. Вы не можете использовать тег внутри. Но вы можете использовать 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>

Answer 2

Если вы хотите изменить фон за текстом, попробуйте это:

<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>