Html 如何更改下拉列表项的字体系列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10696004/
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
How to change font-family of drop down's list item?
提问by Mohal
I have a drop-down that lists font families. Like Tahoma, Arial, Verdana, etc. I want to change the font-family of each drop-down item according to the value it represents. Just like Photoshop does it.
我有一个下拉列表，列出了字体系列。像 Tahoma、Arial、Verdana 等。我想根据它代表的值更改每个下拉项的字体系列。就像 Photoshop 一样。
I changed the CSS for each drop-down item but it only works on FireFox. It doesn't work on any other browser.
我更改了每个下拉项的 CSS，但它仅适用于 FireFox。它不适用于任何其他浏览器。
I don't want to use any jQuery plugin.
我不想使用任何 jQuery 插件。
采纳答案by Kris
That's because the selectelements children (options) aren't really stylable and firefox seems to be the only browser to ignore that part of the spec.
那是因为select元素子元素 ( options) 并不是真正可样式化的，而 Firefox 似乎是唯一忽略该部分规范的浏览器。
The workaround is to replace your selectelement with a custom widget that uses only stylable elements and perhaps a little javascript for the interactivity. like what's done here: http://jsfiddle.net/sidonaldson/jL7uU/or http://jsfiddle.net/theredhead/4PQzp/
解决方法是select使用自定义小部件替换您的元素，该小部件仅使用可样式化的元素和一些用于交互的 javascript。就像这里所做的一样：http: //jsfiddle.net/sidonaldson/jL7uU/或http://jsfiddle.net/theredhead/4PQzp/
回答by craig-c
You can set fonts for an HTML drop-down in the following way:
1. Build your list of options that will be displayed in your dropdown, but don't apply any styling/classes to any of those options. In PHP I would store my list of options to a variable and then use that variable to add options to my dropdown which I'll show below.
2. When you want to actually insert the dropdown into the page, use the SELECT tag and put some CSS styling inside that tag as I've shown below:
您可以通过以下方式为 HTML 下拉列表设置字体：
1. 构建将显示在下拉列表中的选项列表，但不要将任何样式/类应用于任何这些选项。在 PHP 中，我会将我的选项列表存储到一个变量中，然后使用该变量将选项添加到我将在下面显示的下拉列表中。
2. 当您想要将下拉列表真正插入页面时，请使用 SELECT 标签并在该标签内放置一些 CSS 样式，如下所示：
<SELECT style='font-size: 10px; font-family: "Verdana", Sans-Serif;' name='???????'>
<?php echo $your_variable_containing_dropdown_content; ?>
</SELECT>
That works 100% fine for me on the website I'm currently working. This is just the styling that I've used in my page, but it can be whatever you need it to be.
在我目前正在工作的网站上，这对我来说 100% 很好。这只是我在页面中使用的样式，但它可以是您需要的任何样式。
回答by Kazi Hasan Ali
You can do something like this
你可以做这样的事情
<select>
<optgroup style="font-family:arial">
<option>Arial</option>
</optgroup>
<optgroup style="font-family:verdana">
<option>veranda</option>
</optgroup>
回答by Siderite Zackwehdex
I am not the most CSS wise guy around, but it seems to me that if styling the selectelement changes the font, as many other answers submit, then a CSS rule referring to selects should work, too.
我不是周围最聪明的 CSS 人，但在我看来，如果样式选择元素改变了字体，就像许多其他答案提交一样，那么引用选择的 CSS 规则也应该起作用。
In my case I set the font-family on htmland it applied everywhere except selectelements. So I changed the rule to apply to htmland selectelements and it worked. Tested on Chrome and Edge (although Edge didn't need the select rule to begin with).
在我的情况下，我在html上设置了字体系列，它应用于除选择元素之外的所有地方。所以我更改了规则以应用于html并选择元素并且它起作用了。在 Chrome 和 Edge 上进行了测试（尽管 Edge 开始时不需要选择规则）。
Bottom line: html, select { font-family: Verdana, Geneva, sans-serif; }
底线：html，选择 { font-family: Verdana, Geneva, sans-serif; }
回答by Jukka K. Korpela
What you can do in CSS is what you described: setting font-familyon optionelements, and this has limited browser support. Browsers may implement selectelements using routines that are partly or completely immune to CSS.
您可以在 CSS 中做的就是您所描述的：font-family在option元素上设置，并且浏览器支持有限。浏览器可以select使用部分或完全不受 CSS 影响的例程来实现元素。
The workaround is to use something else than a selectelement, such as a set of radio buttons, but it will of course be rendered differently from a dropdown menu. Then you can use e.g.
解决方法是使用select元素以外的其他东西，例如一组单选按钮，但它的呈现方式当然与下拉菜单不同。然后你可以使用例如
<div><input type="radio" name="font" value="Tahoma" id="tahoma">
<label for="tahoma" style="font-family: Tahoma">Tahoma</label></div>
...
回答by DevAshish
Try this:
尝试这个：
<html>
<head>
<style>
.styled-select {
overflow: hidden;
height: 30px;
}
.styled-select select {
font-size: 14pt;
font-family:"Times New Roman",Times,serif;
height: 10px;
}
</style>
<title></title>
</head>
<body>
<div class="styled-select">
<select>
<option selected="selected" >One</option>
<option >Two</option>
</select>
</div>
</body>
</html>
