html - 更改 select 标签中单独选项的 css 字体系列

Question

我不知道这是否可行，如果不行，是否有人可以抛出可选的想法，但我正在尝试在一个选择中显示不同字体(特别是来自 Google 字体目录的字体)的下拉列表标签。在下拉菜单中，我试图通过使用它代表的字体设置每个选项的样式来显示预览

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

不过这似乎不起作用。任何线索为什么或如何修复它？

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