我为下拉列表的初始视图设置了自定义字体和背景(选择一个选项).字体大小为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';
}我尝试为选项本身创建一个单独的类,但这似乎没有任何影响.
为了进一步说明,这是一个JSFiddle.
铬：
火狐：
最佳答案
我同意彼得,但是使用：
select {
font-size: 20px;
font-family: 'Averia Libre',cursive;
}
在CSS上将更改所有下拉字体,所以他应该使用类而不是总选择
CSS
.selectClass {
font-size: 25px;
font-family: 'Impact',cursive;
}
和HTML
或者你可以直接看到小提琴
http://jsfiddle.net/sNkDW/
