css – 如何更改列表的字体大小(不是初始视图)

我为下拉列表的初始视图设置了自定义字体和背景(选择一个选项).字体大小为20像素,使用自定义字体看起来很棒.但是,当我单击列表时,选项本身不使用自定义字体并且看起来正常,除了字体大小,似乎可以继续.这似乎只是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';
}

hey me too!


我尝试为选项本身创建一个单独的类,但这似乎没有任何影响.
为了进一步说明,这是一个JSFiddle.
铬：
火狐：


最佳答案
我同意彼得,但是使用：

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

在CSS上将更改所有下拉字体,所以他应该使用类而不是总选择
CSS

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

和HTML

hey me too!

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

css – 如何更改列表的字体大小(不是初始视图)

相关文章