如何更改下拉列表项的字体系列？答案

【问题标题】：How to change font-family of drop down's list item?如何更改下拉列表项的字体系列？
【发布时间】：2023-03-20 10:57:01
【问题描述】：

我有一个列出字体系列的下拉菜单。像 Tahoma、Arial、Verdana 等。我想根据它所代表的值更改每个下拉项的 font-family。就像 Photoshop 一样。

我更改了每个下拉项的 CSS，但它仅适用于 FireFox。它不适用于任何其他浏览器。

我不想使用任何 jQuery 插件。

【问题讨论】：

标签： html css select drop-down-menu

【解决方案1】：

那是因为 select 子元素 (options) 的样式并不固定，而 firefox 似乎是唯一一个忽略该规范部分的浏览器。

解决方法是将您的select 元素替换为自定义小部件，该小部件仅使用可样式化元素，并且可能使用一点javascript 进行交互。就像这里所做的一样：~~http://jsfiddle.net/sidonaldson/jL7uU/~~ 或 http://jsfiddle.net/theredhead/4PQzp/

【讨论】：

Firefox 并没有真正违反规范。相反，规范对 option 元素是否可设置样式的问题保持沉默（尽管自然期望它们可以像任何其他元素一样设置样式，但实现通常使用不允许这样做的技术）。
我记得读过表单控件应该是平台原生的。不过似乎找不到我在哪里读到的，我可能只是误会了我在哪里读到的。尽管如此，据我所知，大多数浏览器确实使用平台原生表单控件。
添加了另一个链接到我自己的类似小提琴

【解决方案2】：

你可以这样做

<select>
<optgroup style="font-family:arial">
    <option>Arial</option>
</optgroup>
<optgroup style="font-family:verdana">
    <option>veranda</option>
</optgroup>

【讨论】：

确实如此，即使我只在 chrome 上进行测试

【解决方案3】：

您可以通过以下方式为 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% 没问题。这只是我在页面中使用的样式，但它可以是您需要的任何样式。

【讨论】：

对我来说，它只需要在选择标签中使用 style='whatever font you want'。

【解决方案4】：

我知道这是一个老问题，但我发现了一个更简单的解决方案，它似乎适用于大多数浏览器，如果不是全部的话（在 FireFox、Chrome 和 Edge 中测试）。

要更改select 中每个项目的样式，我只需将style 属性添加到option 标记。

这是一个例子：

<select>
    <option style="font-family:Arial;background-color:#F22">Arial</option>
    <option style="font-family:'Arial Black'">Arial Black</option>
    <option style="font-family:Verdana">Verdana</option>
</select>

【讨论】：

【解决方案5】：

您可以在 CSS 中执行您所描述的操作：在 option 元素上设置 font-family，这对浏览器的支持有限。浏览器可以使用部分或完全不受 CSS 影响的例程来实现 select 元素。

解决方法是使用select 元素以外的其他元素，例如一组单选按钮，但它的呈现方式当然与下拉菜单不同。然后你可以使用例如

<div><input type="radio" name="font" value="Tahoma" id="tahoma">
<label for="tahoma" style="font-family: Tahoma">Tahoma</label></div>
...

【讨论】：

【解决方案6】：

我不是最聪明的 CSS 人，但在我看来，如果 select 元素的样式会改变字体，正如许多其他答案所提交的那样，那么引用选择的 CSS 规则应该可以工作，也是。

在我的例子中，我在 html 上设置了字体系列，它适用于除 select 元素之外的所有地方。所以我将规则更改为适用于 html 和 select 元素并且它起作用了。在 Chrome 和 Edge 上测试（虽然 Edge 不需要选择规则开始）。

底线：html，选择 { font-family: Verdana, Geneva, sans-serif; }

【讨论】：

【解决方案7】：

这应该给你一个想法来完成这个：

<select>

    <option value="Arial">First</option>
    <option value="Verdana">Second</option>


    </select>




    $(function() {
    $('select > option').hover(function() {
        $(this).parent().css({fontFamily:$(this).val()})    
})            
})

JSFIDDLE

【讨论】：

他说他不想用jquery。
如果它是跨浏览器的，值得考虑，但我刚刚尝试时在 Chrome 中不起作用。
这是一件很奇怪的事情。它作为一种编程实践很糟糕，但我喜欢它的独创性，没有人应该因为“试图帮助”而被否决，所以......

【解决方案8】：

试试这个：

<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>

【讨论】：