更改css字体系列以在选择标签中使用单独的选项
[英]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. 
我不知道这是否可行，如果不能，是否有人可以抛出一些可选的想法，但是我试图在选择标记中显示不同字体（特别是Google字体目录中的字体）的下拉列表。 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? 有任何线索为何或如何解决？
7 个解决方案
解决方案1
8 2012-08-23 14:31:45
You should wrap each option tag in an optgroup tag 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>
解决方案2
7 2011-01-12 19:16:50
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>
解决方案3
2 2011-01-12 19:16:56
Maybe you can use javascript? 也许您可以使用javascript？ Can you try this ? 你可以试试这个吗？
<script>
myObj = document.getElementById("tahoma");
myObj.style.font = "Tahoma";
myObj.style.color = "red";
// Change anything else that you like!
</script>
<option id="tahoma .....>
解决方案4
1 2016-07-30 11:21:31
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>
解决方案5
0 2016-11-01 08:31:07
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>
解决方案6
0 2011-01-12 20:45:23
I used a hackish-style method to do it. 我使用一种hackish风格的方法来做到这一点。
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的时尚选择插件，并将font-family css属性附加到父元素（这是一个list标签）。
That worked with little code and was cross-browser compatible. 只需很少的代码即可实现，并且与跨浏览器兼容。
解决方案7
0 2018-03-04 08:56:23
All options mentioned above didnt display thing correct on OSX Safari. 上面提到的所有选项均未在OSX Safari上显示正确的内容。 I managed to get things correct by using bootstrap: 我设法通过使用引导程序使事情正确：
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.