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

Question

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

铬：

火狐：

Answer 1

我同意彼得，但是使用了：

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

css上的

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

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/

Answer 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;
}

Answer 3

我在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 */
}

Answer 4

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

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

（除了用custom JavaScript version替换<select>）。

Answer 5

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

在Firefox中： 只有＆＃34;选择＆＃34;下拉组合框中的元素尊重您应用的任何CSS样式。样式不会级联到选项标签。为每个选项标签添加CSS样式无效。

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

我已经读过＆＃34;标准＆＃34;不需要select和option标签可以设置样式。

Answer 6

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

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