5

我为下拉列表的初始视图设置了自定义字体和背景（选择一个选项）。这font-size是 20 像素，使用自定义字体看起来很棒。但是，当我单击列表时，选项本身不使用自定义字体并且看起来很正常，除了font-size似乎可以延续。这似乎只是 Chrome 的情况（我也测试过 Safari 和 Firefox）。

@font-face {
    font-family: 'Averia Libre';
    font-style: normal;
    font-weight: 400;
    src: local('Averia Libre Regular'), local('AveriaLibre-Regular'),
    url('http://themes.googleusercontent.com/static/fonts/averialibre/v1/rYVgHZZQICWnhjguGsBspHhCUOGz7vYGh680lGh-uXM.woff') format('woff');
}
select {
    font-size: 20px;
    font-family: 'Averia Libre', cursive;
    background: url(http://www.greenriverworks.com/elements/borders/green_button_background_over.jpg) repeat-x;
    width: 400px;
    font-family: 'Averia Libre';
}
<link href='http://fonts.googleapis.com/css?family=Averia+Libre' rel='stylesheet' type='text/css'>
<select>
    <option value="">I'm a custom font.</option>
    <option value="">Hey me too!</option>
    <option value="">Averia Libre</option>
</select>

我尝试为选项本身创建一个单独的类，但这似乎没有任何效果。

为了进一步说明，这里有一个JSFiddle。

铬合金：

在此处输入图像描述

火狐：

在此处输入图像描述

4

6 回答 6

6

我同意彼得的观点，但使用的是：

select {
  font-size: 20px;
  font-family: 'Averia Libre', cursive;
}

在 css 上会改变所有的下拉字体，所以他应该使用类而不是总选择

CSS

.selectClass {
   font-size: 25px;
   font-family: 'Impact', cursive;
}​

和 HTML

<link href='http://fonts.googleapis.com/css?family=Averia+Libre' rel='stylesheet' type='text/css'>

<select class="selectClass">
<option value="">I'm a custom font.</option>
<option value="">Hey me too!</option>
<option value="">Averia Libre</option>
</select>​

或者您可以直接在http://jsfiddle.net/sNkDW/上看到小提琴

于 2012-05-10T22:12:50.323 回答
2

看起来下拉列表正在由 Mac OS X 的“本机 UI”呈现。

如果设置字体和/或大小实际上并没有改变任何东西，那么您无能为力。

（除了用<select>自定义 JavaScript 版本替换）。

于 2012-05-10T22:52:44.473 回答
2

在 chrome 中尝试添加background: white;到类 Select。通过将背景设置为白色，Chrome 也遵循了我的其他规范，例如高度和字体。

.yourselectclass select {
    background: white;
    font-size: 16px;
    margin-left: 5px;
    font-family: 'Cabin', sans-serif;
    height: 30px;
    width: 88px;
}
于 2015-05-05T13:46:46.950 回答
1

我已经在 Chrome 上成功完成了这项工作。这是 Google Fonts 自定义字体的示例。

小提琴：http: //jsfiddle.net/simple/wpHKe/

您的HTML代码：

<select>
<option value="">I'm a custom font.</option>
<option value="">Hey me too!</option>
<option value="">Averia Libre</option>
</select>​

当然，CSS：

select {
    font-size: 20px;
    font-family: 'Averia Libre', cursive;
}​

以及来自 Google 的 Font Face：

您可以看到这个链接为外部样式表，但这是其中的代码。

@font-face {
  font-family: 'Averia Libre';
  font-style: normal;
  font-weight: 400;
  src: local('Averia Libre Regular'), local('AveriaLibre-Regular'),
  url('http://themes.googleusercontent.com/static/fonts/averialibre/v1/rYVgHZZQICWnhjguGsBspHhCUOGz7vYGh680lGh-uXM.woff') format('woff');
}

编辑：

正如@Jhilom所指出的，如果您不希望这影响您网站上的所有 DropdDowns，请确保在 Select 中包含一个 CSS 类，如下所示：

HTML：

<select class="yourSelectClass">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

CSS：

.yourSelectClass
{
/* Your Dropdown CSS here */
}
于 2012-05-10T21:52:27.420 回答
0

在 Firefox 中无法更改选项标签内文本的 CSS 样式。

在 Firefox 中：只有下拉组合框中的“selected”元素才会考虑您应用的任何 CSS 样式。该样式不会级联到选项标签。为每个选项标签添加 CSS 样式没有任何效果。

在 Chrome 中：Chrome 尊重您添加到 select 和 option 标签的 CSS 样式。样式不会从选择标签级联到选项标签，但您可以将样式应用于每个选项标签。

我读过“标准”不需要选择和选项标签是可样式化的。

于 2016-09-20T16:56:09.887 回答
0

我遇到了同样的问题。其实这不是问题。选择菜单大小根据列表项文本长度显示。检查您的选项标签

例如：如果选项标签中有很长的文本，那么选择菜单的字体会很小。

于 2017-02-15T04:20:48.043 回答