Question

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

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

我不想使用任何jQuery插件。

Answer 1

这是因为select个元素（option s）并不是真正的样式，而firefox似乎是唯一忽略该部分规范的浏览器。

解决方法是将您的select元素替换为仅使用可设置样式元素的自定义窗口小部件，并且可能只需要一些javascript来实现交互性。就像在这里做的那样： ~~http://jsfiddle.net/sidonaldson/jL7uU/~~ 或http://jsfiddle.net/theredhead/4PQzp/

Answer 2

您可以通过以下方式为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％罚款。这只是我在页面中使用的样式，但它可以是您需要的样式。

Answer 3

您可以这样做

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

Answer 4

我并不是最聪明的CSS专家，但是在我看来，如果对 select 元素进行样式设置会更改字体，就像许多其他答案一样，那么引用select的CSS规则应该可以工作也是如此。

在我的情况下，我在 html 上设置了字体系列，并且将其应用于除 select 元素之外的所有位置。因此，我将规则更改为适用于 html 和 select 元素，并且该规则起作用了。在Chrome和Edge上进行了测试（尽管Edge不需要选择规则开始）。

底线： html，选择{字体系列：Verdana，Geneva，sans-serif; }

Answer 5

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

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

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

Answer 6

这应该给你一个想法来实现这个目标：

<select>

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


    </select>




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

<强> JSFIDDLE

Answer 7

试试这个：

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

如何更改下拉列表项的font-family？

7 个答案: