更改选择标签中单独选项的 css 字体系列 [英] Change css font-family for separate options in select tag

问题描述

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

I don't know if this is possible, and if not, if someone can throw out optional ideas, but I'm attempting to display a drop down of different fonts (specifically, font's from Google's font directory) in a select tag. In the drop down, I'm trying to show a preview by styling each option with the font it represents

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

不过，这似乎不起作用.任何线索为什么或如何解决它?

This doesn't seem to be working, though. Any clues why or how to fix it?

推荐答案

您应该将每个 option 标签包装在一个 optgroup 标签中，然后将其样式设置为:

You should wrap each option tag in an optgroup tag and then style that as:

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

这篇关于更改选择标签中单独选项的 css 字体系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！