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

问题描述

我不知道这是否可能，如果没有，如果有人可以抛出可选的想法，但我试图显示一个下拉的不同的字体（具体来说，从谷歌的字体目录中的字体）在选择标签。在下拉列表中，我试图通过为每个选项设置其代表的字体来显示预览

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>

这似乎不起作用。

推荐答案

您不能设置< option>的字体; 标签，但您可以创建一个包含特定样式的列表（如您所料）

You cannot set the font of the <option> tag but you could create a list with specific styles (as you would expect)

这里是我一直在尝试的：

Here's everything I've been trying:

$("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>

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