为选择标签中的单独选项更改 css 字体系列

Posted

技术标签:

【中文标题】为选择标签中的单独选项更改 css 字体系列【英文标题】:Change css font-family for separate options in select tag 【发布时间】:2011-06-08 01:28:24 【问题描述】:

我不知道这是否可能,如果没有,是否有人可以抛出可选的想法,但我试图在选择中显示不同字体的下拉列表(特别是来自 Google 字体目录的字体)标签。在下拉菜单中,我试图通过使用它所代表的字体为每个选项设置样式来显示预览

<option name="Tangerine" style="font-family:'Tangerine', verdana;">Tangerine</option>

不过,这似乎不起作用。任何线索为什么或如何解决它?

【问题讨论】:

如果有人遇到类似的问题:IE9(至少)在绑定到选项时似乎会忽略 font-size 设置 - 但在绑定到 @ 时会采用 font-size 987654324@ 自己。 【参考方案1】:

您应该将每个 option 标记包装在一个 optgroup 标记中,然后将其设置为:

<select>

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

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

  <optgroup style="font-family:other">
    <option>other</option>
  </optgroup>

</select>

【讨论】:

为我工作。太棒了! 这可行,但有没有办法消除选项之间的差距,更重要的是,倒数第二个选项的缩进(似乎总是倒数第二个)?【参考方案2】:

您无法设置&lt;option&gt; 标签的字体,但您可以创建具有特定样式的列表(如您所料)

这是我一直在尝试的一切:

$("select.js option:eq(0), ul li:eq(0)").css("fontFamily", "tangerine");
$("select.js option:eq(1), ul li:eq(1)").css("fontFamily", "tahoma");
$("select.js option:eq(2), ul li:eq(2)").css("fontFamily", "times new roman");
h1 
  font-size: 1.2em;
  margin-top: 10px;
  color: #777;

.tangerine 
  font-family: tangerine;

.tahoma 
  font-family: tahoma;

.timesnewroman 
  font-family: times new roman;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<h1>Set with jQuery</h2>
<select id="js">
    <option>Tangerine</option>
    <option>Tahoma</option>
    <option>Times New Roman</option>
</select>
<div>&nbsp;</div>
<h1>Set with CSS</h2>
<select id="css">
    <option class="tangerine">Tangerine</option>
    <option class="tahoma">Tahoma</option>
    <option class="timesnewroman">Times New Roman</option>
</select>
<div>&nbsp;</div>
<h1>List</h2>
<ul>
    <li>Tangerine</li>
    <li>Tahoma</li>
    <li>Times New Roman</li>
</ul>

【讨论】:

CSS 在 Chrome 58(Linux 上)中为我工作,很好!【参考方案3】:

也许你可以使用javascript?你可以试试这个吗?

<script>
myObj = document.getElementById("tahoma");
myObj.style.font = "Tahoma";
myObj.style.color = "red";

// Change anything else that you like!
</script>

<option id="tahoma .....>

【讨论】:

您使用的是什么浏览器?我正在使用 Firefox,它正在工作。 FF 可以识别选项中的字体,但大多数浏览器不能 所以,这不是跨浏览器解决方案:( 查看我更新的 jsfiddle:jsfiddle.net/95TVh/2 FF 识别 CSS 类,但不能识别选项本身的 font-family 因为您使用的是 【参考方案4】:

你可以像这样简单地使用

<select id='lstFonts' class='form-control'>
    <option style="font-family:Arial" value="Arial">Arial</option>
    <option style="font-family:Verdana" value="Verdana">Arial</option>
</select>

【讨论】:

【参考方案5】:

将字体名称赋予选项值。然后你可以用 jquery 来设置它们。

这是一个例子:

您可以像这样轻松添加新字体:

<option value="myFontName">My Font Name</option>

$("#selectfont").each(function()
  $(this).children("option").each(function()
    $(this).css("fontFamily",this.value);
  );
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<select id="selectfont">
<option value="tangerine">Tangerine</option>
<option value="tahoma">Tahoma</option>
<option value="times new roman">Times New Roman</option>
</select>

【讨论】:

【参考方案6】:

我使用了一种 hackish 风格的方法。

因为我需要设置 select 标签的样式并且想要自定义更多的东西,所以我使用了 jQuery 的 Stylish Select 插件并将 font-family css 属性附加到父元素(这是一个列表标签)。

这需要很少的代码并且是跨浏览器兼容的。

【讨论】:

【参考方案7】:

上面提到的所有选项在 OSX Safari 上都没有正确显示。我设法通过使用引导程序使事情正确:

<!DOCTYPE html>
    <html lang="nl">
    <head>
    <meta charset="utf-8" />
    <title>font test</title>
    <meta name="generator" content="BBEdit 10.5" />
    <link rel="stylesheet" type="text/css" href="yourpaththere/css/bootstrap.min.css" async />
    </head>
    <body>
    <style>
    @font-face font-family: edwardian;src:local("edwardian"),url('yourpathhere/font/edwardian.TTF');font-weight: normal;
    .edwardianfont-family: edwardian; font-size: 30px;

    .arialfont-family: arial;
    .timesfont-family: times;
    .verdanafont-family: verdana;
    .helveticafont-family: helvetica;
    </style>
    <div id="fontdropdown1" class="dropdown" style="width: 300px;">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Kies een lettertype
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    <li role="presentation"><a role="menuitem" class="arial">Arial</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" class="times">Times</a></li>
    <li role="presentation"><a role="menuitem" class="verdana">Verdana</a></li>
    <li role="presentation"><a role="menuitem" class="helvetica">Helvetica</a></li>
    <li role="presentation"><a role="menuitem" class="edwardian">Edwardian</a></li>
    </ul>
    </div>
    <!-- test font dropdown -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script type="text/javascript" src="yourpathhere/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="yourpathhere/js/bootstrap.js"></script>
    </body>
    </html>

【讨论】:

以上是关于为选择标签中的单独选项更改 css 字体系列的主要内容,如果未能解决你的问题,请参考以下文章

从选择选项更改字体颜色

如何在 Pyside2 的 QTabWidget 中更改特定选项卡的字体?

更改 HTML 从 JavaScript 中选择标签字体颜色

更改选择标签下特定选项的颜色

如何根据 Django admin 中的另一个选择标签选项更改选择标签选项?

如何在 CSS 中更改默认的蓝色选择选项颜色