Как изменить размер шрифта списка (не начальный вид)

Я установил собственный шрифт и фон для начального вида выпадающего списка (выберите вариант).font-size 20 пикселей и отлично смотрится с пользовательским шрифтом. Однако, когда я нажимаю на список, сами параметры не используют пользовательский шрифт и выглядят нормально, за исключениемfont-size, который, кажется, переносить. Это похоже только на Chrome (я также тестировал Safari и Firefox).

<code>@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';
}</code>
<code><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></code>

Я пытался создать отдельный класс для самих опций, но это, похоже, не имело никакого эффекта.

Для иллюстрации далее здесьJSFiddle.

Хром:

enter image description here

Fire Fox:

enter image description here

 domino11 мая 2012 г., 00:17
Я не Mac ... Это может быть.
 domino11 мая 2012 г., 00:03
 frontendzzzguy10 мая 2012 г., 23:52
Можете ли вы включить немного CSS, чтобы помочь ответить на этот вопрос, пожалуйста.
 Peter11 мая 2012 г., 00:15
Это действительно странно. Пока это работает нормально для трех человек, которые рассматривают вашу проблему, проблема может быть в вас как-то. Но я не знаю почему. Хотелось бы услышать, если кто-то еще не видит пользовательский шрифт.

Ответы на вопрос(6)

меню выбора отображается в зависимости отlist item text length, Проверьте ваш вариант метки

Пример: если у вас есть длинный текст в тегах параметров, тогда размер шрифта в меню выбора будет небольшим.

Я успешно сделал это на 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>​

Of course, CSS:

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

And the Font Face that comes from 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 */
}
 11 мая 2012 г., 00:09
Вы также можете редактировать мой пост.
 11 мая 2012 г., 00:48
Вы не тестируете на Mac, не так ли?
 domino11 мая 2012 г., 00:30
У фактического выпадающего списка был класс.
 domino11 мая 2012 г., 00:02
Я немного отредактировал твой код:jsfiddle.net/bumpy009/wpHKe/7  Это выглядит большим в хром ...

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/

 11 мая 2012 г., 00:18
Спасибо за замечание, но этоdemo по причине. Такие мелкие детали и пояснения не стоят полного нового поста.
 domino11 мая 2012 г., 00:22
В реальном коде я использовал класс. Я также не вижу пользовательский шрифт в вашем jsfiddle.
 11 мая 2012 г., 06:09
@domino, вы можете использовать любой шрифт. Я просто привел пример шрифта & quot; Воздействие & quot;

В хроме попробуйте добавитьbackground: white; в класс Выберите. При установке фона на белый Chrome также следовал остальным моим характеристикам, таким как высота и шрифт.

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

.

В Firefox: Только "выбранный" Элемент в раскрывающемся поле со списком учитывает любой стиль CSS, который вы применяете. Стиль не распространяется на теги параметров. Добавление стиля CSS к каждому тегу параметра не имеет никакого эффекта.

В Chrome: Chrome учитывает стиль CSS, который вы добавляете в теги select и option. Стиль не распространяется вниз от тега select к тегам option, но вы можете применить стиль к каждому тегу option.

Я прочитал, что «стандарт» не требует, чтобы теги select и option были стилизованными.

что выпадающий список отображается с помощью «родного интерфейса». Mac OS X.

Если установка шрифта и / или размера на самом деле ничего не меняет, вы ничего не можете с этим поделать.

(Кроме замены<select> спользовательская версия JavaScript).

 29 апр. 2014 г., 23:11
Это было полезно для меня:css-tricks.com/dropdown-default-styling
 domino11 мая 2012 г., 09:27
Размер шрифта изменяется, но он не должен влиять на сам список. В хроме это делает. Я посмотрю на версию JS, спасибо.
 11 мая 2012 г., 13:51
Возможно, это не должно повлиять на сам список, но, к сожалению, изменить его невозможно :((other than using a JavaScript replacement)

Ваш ответ на вопрос