如何创建带有预览的选择字体下拉列表？答案

【问题标题】：How to Create a Select Font Drop Down List With a Preview?如何创建带有预览的选择字体下拉列表？
【发布时间】：2013-03-19 15:11:18
【问题描述】：

我想创建一个选择下拉列表来选择一种字体。在这个列表中，我希望每个字体选项都以该样式显示为字体的预览。

<select>
    <option class="Times-New-Roman" value="Times-New-Roman">Times New Roman</option>
    <option class="Verdana" value="Verdana">Verdana</option>
    <option value="Comic-Sans-MS">Comic Sans MS</option>
    <option value="WildWest">WildWest</option>
    <option value="Bedrock">Bedrock</option>
</select>

上面是一个基本的下拉框，其中每种字体类型都有自己的类名，但似乎无法弄清楚如何制作它，以便每个类名都有自己的字体，该字体将显示在下拉列表中。

感谢您花时间帮助寻找解决方案。

最好的问候，蒂姆

【问题讨论】：

可能是这样的？ jankoatwarpspeed.com/…我已经从这个例子中创建了小提琴（jsfiddle.net/h7YqN），看看下拉列表中的最后一个选项，有Comic Sans MS。尽量避免“选择”元素的样式，你不能在每个浏览器中都这样做。相反，使用此代码或任何其他代码来重现下拉效果。如果需要通过表单获取选定的值，您还可以扩展此代码，并将值应用于隐藏的输入。
请记住，您不能重新设计“选择”列表。您必须使用一些 JavaSrcipt 或 jQuery 来模拟“li”或类似的“select”列表。有很多脚本可以做到这一点。

标签： html css

【解决方案1】：

试试下面的格式。

<select>
    <option style="font-family:'Times New Roman';" class="Times-New-Roman" value="Times-New-Roman">Times New Roman</option>
    <option style="font-family:Verdana, Geneva, sans-serif;" class="Verdana" value="Verdana">Verdana</option>

【讨论】：