Html 如何更改下拉列表项的字体系列？
我有一个下拉列表列出字体系列。像Tahoma、Arial、Verdana等，我想根据每个下拉项所代表的值更改其字体系列。就像Photoshop那样 我更改了每个下拉项的CSS，但它只适用于FireFox。它不适用于任何其他浏览器Html 如何更改下拉列表项的字体系列？,html,css,select,drop-down-menu,Html,Css,Select,Drop Down Menu,我有一个下拉列表列出字体系列。像Tahoma、Arial、Verdana等，我想根据每个下拉项所代表的值更改其字体系列。就像Photoshop那样 我更改了每个下拉项的CSS，但它只适用于FireFox。它不适用于任何其他浏览器 我不想使用任何jQuery插件。在CSS中可以做的就是您所描述的：在选项元素上设置字体系列，这限制了浏览器的支持。浏览器可以使用部分或完全不受CSS影响的例程实现select元素 解决方法是使用select元素以外的其他元素，例如一组单选按钮，但它的呈现方式当然与下拉菜
我不想使用任何jQuery插件。在CSS中可以做的就是您所描述的：在选项元素上设置字体系列，这限制了浏览器的支持。浏览器可以使用部分或完全不受CSS影响的例程实现select元素 解决方法是使用select元素以外的其他元素，例如一组单选按钮，但它的呈现方式当然与下拉菜单不同。然后你可以使用例如
<div><input type="radio" name="font" value="Tahoma" id="tahoma">
<label for="tahoma" style="font-family: Tahoma">Tahoma</label></div>
...
这应该给你一个如何实现这一目标的想法：
<select>
<option value="Arial">First</option>
<option value="Verdana">Second</option>
</select>
$(function() {
$('select > option').hover(function() {
$(this).parent().css({fontFamily:$(this).val()})
})
})
<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>
可以通过以下方式为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>
在我目前工作的网站上，这对我来说是100%的好。这只是我在页面中使用的样式，但它可以是您需要的任何样式。您可以这样做
<select>
<optgroup style="font-family:arial">
<option>Arial</option>
</optgroup>
<optgroup style="font-family:verdana">
<option>veranda</option>
</optgroup>
我并不是CSS方面最聪明的人，但在我看来，如果选择元素的样式改变了字体，就像许多其他答案一样，那么引用选择的CSS规则也应该起作用 在我的例子中，我将字体系列设置为html，它应用于除select元素之外的所有地方。因此，我改变了规则，将其应用于html和select元素，结果成功了。在Chrome和Edge上进行了测试，尽管Edge一开始不需要选择规则
一句话：html，选择{font-family:Verdana，Geneva，sans-serif；}他说他不想使用jquery。如果它是跨浏览器的，那就值得考虑，但我刚才尝试它时在Chrome中不起作用。Firefox并没有真正违反规范。相反，规范没有提到选项元素是否可以设置样式的问题，尽管人们自然期望它们可以像任何其他元素一样设置样式，但实现通常使用不允许设置样式的技术。我记得读到过表单控件应该是平台本机的。但我似乎找不到我在哪里读到的，我可能只是误会了我在哪里读到的。尽管如此，据我所知，大多数浏览器确实使用平台原生表单控件。在我自己的类似小提琴上添加了另一个链接确实如此，即使我只在chrome上进行了测试。对于我来说，它只需在选择标记中使用style='anywhich font your want'。