Как я могу изменить цвет частичного текста в раскрывающемся теге ‹select›

Рассмотрим мой код, как показано ниже:

<select id="TestStatus">
  <option value="0">Active <span style="color:#0823fa;">*</span></option>
  <option value="0">Inactive</option>
</select>

Здесь я хочу изменить цвет «*» на «синий», но это не работает. Может ли кто-нибудь предложить мне, как достичь этого пользовательского интерфейса?


person Viveka    schedule 27.11.2020    source источник


Ответы (2)


На самом деле невозможно вставить другие элементы DOM-ELements внутрь тега option-tag. введите здесь описание изображения

Вот как браузер отображает ваш код (я только добавил отсутствующий '').

<select id="TestStatus">
   <option value="0">Active <span style="color:#0823fa;">*</span></option>
   <option value="0">Inactive</option>
  </select>

Вы можете редактировать стиль элементов параметров с помощью css, но вы не можете добавить в него ничего, кроме текста. Подробнее о спецификации тега option можно прочитать здесь: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

введите здесь описание изображения

person J. Doe    schedule 27.11.2020

Тег <option> не может содержать другие теги HTML, вы можете проверить свой HTML-код и увидеть, что добавленного вами элемента <span> там нет

здесь гораздо больше подробностей Стиль части текста OPTION

и вот пример скрипта JS о том, как вы можете создать свой собственный раскрывающийся список

http://jsfiddle.net/ZTHkQ/850/

person Ron Gabbay    schedule 27.11.2020