29

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

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

我不想使用任何 jQuery 插件。

4

8 回答 8

19

那是因为select元素 children ( options) 并不是真正可设置样式的，而 firefox 似乎是唯一一个忽略该规范部分的浏览器。

解决方法是用一个自定义小部件替换您的select元素，该小部件仅使用可样式化元素，也许还有一些用于交互的 javascript。就像这里所做的：http: //jsfiddle.net/sidonaldson/jL7uU/或http://jsfiddle.net/theredhead/4PQzp/

于 2012-05-22T05:30:11.750 回答
5

你可以做这样的事情

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

于 2018-11-03T09:44:34.330 回答
4

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

于 2016-09-08T17:01:47.403 回答
2

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

要更改 a 中每个单独项目的样式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>

于 2021-11-10T17:30:41.873 回答
0

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

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

<div><input type="radio" name="font" value="Tahoma" id="tahoma">
<label for="tahoma" style="font-family: Tahoma">Tahoma</label></div>
...
于 2012-05-22T05:26:18.633 回答
0

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

就我而言，我在html上设置了 font-family ，它适用于除选择元素之外的所有地方。所以我将规则更改为适用于html并选择元素，它起作用了。在 Chrome 和 Edge 上测试（虽然 Edge 不需要选择规则开始）。

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

于 2020-01-12T00:50:38.520 回答
-5

尝试这个：

<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>
于 2014-05-23T14:12:14.077 回答
-5

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

<select>

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


    </select>




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

JSFIDDLE

于 2012-05-22T05:27:39.053 回答