如何更改列表的字体大小（不是初始视图） [英] How to change the font size of the list (not the initial view)

问题描述

我已为下拉列表的初始视图设置了自定义字体和背景（选择一个选项）。 font-size 是20像素，看起来很好的自定义字体。然而，当我点击列表，选项本身不使用自定义字体和看起来正常，除了 font-size ，这似乎结转。这似乎只是Chrome的情况（我也测试了Safari和Firefox）。

I have set a custom font and background for the initial view of the dropdown list (Select a choice). The font-size is 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-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.

为了进一步说明， a href =http://jsfiddle.net/bumpy009/wpHKe/7 =nofollow noreferrer> JSFiddle 。

To illustrate further, here's a JSFiddle.

Chrome：

Firefox：

推荐答案

我同意彼得但使用：

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

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

b http://jsfiddle.net/sNkDW/

这篇关于如何更改列表的字体大小（不是初始视图）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！