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

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

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

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

Ответ 1

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

<select>

  <optgroup style="font-family:arial">
    <option>Arial</option>
  </optgroup>

  <optgroup style="font-family:verdana">
    <option>veranda</option>
  </optgroup>

  <optgroup style="font-family:other">
    <option>other</option>
  </optgroup>

</select>

Ответ 2

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

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

$("select.js option:eq(0), ul li:eq(0)").css("fontFamily", "tangerine");
$("select.js option:eq(1), ul li:eq(1)").css("fontFamily", "tahoma");
$("select.js option:eq(2), ul li:eq(2)").css("fontFamily", "times new roman");

h1 {
  font-size: 1.2em;
  margin-top: 10px;
  color: #777;
}
.tangerine {
  font-family: tangerine;
}
.tahoma {
  font-family: tahoma;
}
.timesnewroman {
  font-family: times new roman;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<h1>Set with jQuery</h2>
<select id="js">
    <option>Tangerine</option>
    <option>Tahoma</option>
    <option>Times New Roman</option>
</select>
<div>&nbsp;</div>
<h1>Set with CSS</h2>
<select id="css">
    <option class="tangerine">Tangerine</option>
    <option class="tahoma">Tahoma</option>
    <option class="timesnewroman">Times New Roman</option>
</select>
<div>&nbsp;</div>
<h1>List</h2>
<ul>
    <li>Tangerine</li>
    <li>Tahoma</li>
    <li>Times New Roman</li>
</ul>

Ответ 3

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

<script>
myObj = document.getElementById("tahoma");
myObj.style.font = "Tahoma";
myObj.style.color = "red";

// Change anything else that you like!
</script>

<option id="tahoma .....>

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

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

Вот пример:

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

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

$("#selectfont").each(function(){
  $(this).children("option").each(function(){
    $(this).css("fontFamily",this.value);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<select id="selectfont">
<option value="tangerine">Tangerine</option>
<option value="tahoma">Tahoma</option>
<option value="times new roman">Times New Roman</option>
</select>