Geek asks and answers

How to change the font size in the list (and not in its original form)

I set my own font and background for the initial presentation of the drop-down list (select a choice). font-size- 20 pixels and great for custom font. However, when I click on the list, the options themselves do not use a custom font and look normal, except for font-sizeone that seems to carry over. This is similar to Chrome (I also tested Safari and 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>
Run codeHide result

I tried to create a separate class for the parameters themselves, but this did not show any effect.

To illustrate further, here's the JSFiddle .

Chrome:

enter image description here

Firefox:

enter image description here

+5
source share
6 answers

I agree with Peter, but using:

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

css ,

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/

+6

chrome background: white; Select. , Chrome , .

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

Chrome. Google Fonts.

Fiddle: 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-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:

@Jhilom, , DropdDowns , CSS Select, :

HTML:

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

CSS

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

, " " Mac OS X.

/ , .

( <select> JavaScript).

+1

CSS- Firefox.

Firefox: CSS, . . CSS .

Chrome: Chrome CSS, select option. select , .

, "" , select option .

0

. . .

: , .

0

More articles:


All Articles