Изменение семейства шрифтов css для отдельных опций в теге select

Я не знаю, возможно ли это, а если нет, если кто-то может выбросить необязательные идеи, но я пытаюсь отобразить выпадающее из разных шрифтов (в частности, шрифт из каталога шрифтов Google) в выбранном тег. В раскрывающемся списке я пытаюсь показать предварительный просмотр путем стилизации каждой опции с помощью шрифта, который он представляет

<option name="Tangerine" style="font-family:'Tangerine', verdana;">Tangerine</option>

Это, похоже, не работает. Любые подсказки, почему и как их исправить?

6 ответов

Вы должны обернуть каждый тег option в тег optgroup, а затем стиль, который как:


Вы не можете установить шрифт тега , но вы можете создать список со специфическими стилями (как и следовало ожидать)

Здесь все, что я пытался:


Может быть, вы можете использовать javascript? Можете ли вы попробовать это?


Вы можете просто так использовать

<select id="lstFonts">
 <option style="font-family:Arial" value="Arial">Arial</option>
 <option style="font-family:Verdana" value="Verdana">Arial</option>
</select>


Я использовал метод хакерского стиля для этого.

Поскольку мне нужно было подстроить тег select и захотелось настроить еще пару вещей, я использовал плагин Stylish Select для jQuery и привязал атрибут css файла font-family к родительскому элементу (который был тегом списка).

Это работало с небольшим кодом и совместимо с кросс-браузером.


Введите имя шрифта в значение параметра. Затем вы можете установить их все с помощью jquery.

Вот пример:

Вы можете добавить новый шрифт следующим образом:

<option value="myFontName">My Font Name</option>

licensed under cc by-sa 3.0 with attribution.