Html 更改选择标签中单独选项的 css 字体系列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4672960/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change css font-family for separate options in select tag
提问by Dandy
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
我不知道这是否可行，如果不可行，是否有人可以抛出可选的想法，但我试图在选择标签中显示不同字体（特别是来自 Google 字体目录的字体）的下拉列表。在下拉列表中，我试图通过使用它代表的字体设置每个选项的样式来显示预览
<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?
不过，这似乎不起作用。任何线索为什么或如何解决它？
回答by Fakhr Alam
You should wrap each optiontag in an optgrouptag and then style that as:
您应该将每个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>回答by hunter
You cannot set the font of the <option>tag but you could create a list with specific styles (as you would expect)
您无法设置<option>标签的字体，但您可以创建具有特定样式的列表（如您所料）
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> </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> </div>
<h1>List</h2>
<ul>
<li>Tangerine</li>
<li>Tahoma</li>
<li>Times New Roman</li>
</ul>回答by Eray
Maybe you can use javascript? Can you try this ?
也许你可以使用javascript？你能试试这个吗？
<script>
myObj = document.getElementById("tahoma");
myObj.style.font = "Tahoma";
myObj.style.color = "red";
// Change anything else that you like!
</script>
<option id="tahoma .....>
回答by Nitesh Pogul
You can simply use like this
你可以像这样简单地使用
<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>
回答by Nezih
Give the font name to option value. Then you can set them all with jquery.
为选项值提供字体名称。然后你可以用jquery设置它们。
Here is an example:
下面是一个例子：
You can add new font easily like this:
您可以像这样轻松添加新字体：
<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>回答by Nico Vink
All options mentioned above didnt display thing correct on OSX Safari. I managed to get things correct by using bootstrap:
上面提到的所有选项在 OSX Safari 上都没有正确显示。我设法通过使用引导程序使事情正确：
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<title>font test</title>
<meta name="generator" content="BBEdit 10.5" />
<link rel="stylesheet" type="text/css" href="yourpaththere/css/bootstrap.min.css" async />
</head>
<body>
<style>
@font-face {font-family: edwardian;src:local("edwardian"),url('yourpathhere/font/edwardian.TTF');font-weight: normal;}
.edwardian{font-family: edwardian; font-size: 30px;}
.arial{font-family: arial;}
.times{font-family: times;}
.verdana{font-family: verdana;}
.helvetica{font-family: helvetica;}
</style>
<div id="fontdropdown1" class="dropdown" style="width: 300px;">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Kies een lettertype
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" class="arial">Arial</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" class="times">Times</a></li>
<li role="presentation"><a role="menuitem" class="verdana">Verdana</a></li>
<li role="presentation"><a role="menuitem" class="helvetica">Helvetica</a></li>
<li role="presentation"><a role="menuitem" class="edwardian">Edwardian</a></li>
</ul>
</div>
<!-- test font dropdown -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="yourpathhere/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="yourpathhere/js/bootstrap.js"></script>
</body>
</html>
回答by Dandy
I used a hackish-style method to do it.
我使用了一种黑客风格的方法来做到这一点。
Because I needed to style the select tag and wanted to customize a couple more things, I used the Stylish Select plugin for jQuery and attached the font-family css attribute to the parent element (which was a list tag).
因为我需要设置 select 标签的样式并想自定义更多的东西，所以我使用了 jQuery 的 Stylish Select 插件并将 font-family css 属性附加到父元素（这是一个列表标签）。
That worked with little code and was cross-browser compatible.
这用很少的代码工作并且是跨浏览器兼容的。
