CSS 如何更改列表的字体大小（不是初始视图）

How to change the font size of the list (not the initial view)

提问by domino

I have set a custom font and background for the initial view of the dropdown list (Select a choice). The font-sizeis 20 pixels and looks great with the custom font. However when I click on the list, the options themselves do not use the custom font and look normal, except for the font-size, which seems to carry over. This only seems to be the case with Chrome (I've tested Safari and Firefox as well).

我为下拉列表的初始视图设置了自定义字体和背景（选择一个选项）。该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>

I tried creating a separate class for the options themselves, but that did not seem to have any effect.

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

To illustrate further, here's a JSFiddle.

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

Chrome:

铬合金：

Firefox:

火狐：

回答by Jhilom

I am agreed with Peter but by the use of:

我同意彼得，但使用：

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

on the css will change all of the dropdown font so he should use class instead of total select

在 css 上将更改所有下拉字体，因此他应该使用 class 而不是 total select

CSS

CSS

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

And HTML

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

Or you may see the fiddle directly on http://jsfiddle.net/sNkDW/

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

回答by tylerSF

In chrome try adding background: white;to the class Select. By setting the background to white Chrome also followed the rest of my specifications such as height and font.

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

.yourselectclass select {
    background: white;
    font-size: 16px;
    margin-left: 5px;
    font-family: 'Cabin', sans-serif;
    height: 30px;
    width: 88px;
}

回答by Peter

I've done this successfully on Chrome. Here's an example with custom font by Google Fonts.

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

Fiddle:http://jsfiddle.net/simple/wpHKe/

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

The HTMLcode, as yours:

在HTML代码，您：

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

Of course, CSS:

当然，CSS：

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

And the Font Face that comes from Google:

以及来自 Google 的 Font Face：

You can see this one linked as an external style sheet, but this is the code inside it.

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

@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');
}

Edit:

编辑：

As pointed out by @Jhilom, if you don't want this to affect all DropdDowns on your site, be sure to include a CSS Class to the Select, like so:

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

HTML:

HTML：

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

CSS:

CSS：

.yourSelectClass
{
/* Your Dropdown CSS here */
}

回答by thirtydot

It looks like the the dropdown list is being rendering by the "native UI" of Mac OS X.

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

If setting the font and/or size doesn't actually change anything, there's nothing you can do about it.

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

(Other than replacing the <select>with a custom JavaScript version).

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

回答by Eileen Jones

The CSS styling of the text inside the option tags cannot be changed in Firefox.

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

In Firefox: Only the "selected" element in the drop down combo box respects any CSS styling you apply. The style does not cascade down to the option tags. Adding CSS style to each option tag has no effect.

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

In Chrome: Chrome respects the CSS styling you add to the select and option tags. The style does not cascade down from the select tag to the option tags, but you can apply style to each option tag.

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

I've read that "the standard" does not require the select and option tags to be stylable.

我读过“标准”不要求选择和选项标签具有样式。

回答by Shalini

I have faced the same issue. Actually its not an issue. The select menu size appears based on the list item text length. Check your option label

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

Ex: If you have lengthy text in the option tags then the select menu font size will be small.

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