Вопрос по css, google-chrome – Как изменить размер шрифта списка (не начальный вид)

5

Я установил собственный шрифт и фон для начального вида выпадающего списка (выберите вариант).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

Можете ли вы включить немного CSS, чтобы помочь ответить на этот вопрос, пожалуйста. frontendzzzguy
Я не Mac ... Это может быть. domino
@trickeedickeejsfiddle.net/bumpy009/wpHKe/7 domino
Это действительно странно. Пока это работает нормально для трех человек, которые рассматривают вашу проблему, проблема может быть в вас как-то. Но я не знаю почему. Хотелось бы услышать, если кто-то еще не видит пользовательский шрифт. Peter

Ваш Ответ

6   ответов
6

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/

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

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

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

.

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

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

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

1

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

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

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

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

Я успешно сделал это на 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 */
}
Вы не тестируете на Mac, не так ли?
Вы также можете редактировать мой пост.
У фактического выпадающего списка был класс. domino
Я немного отредактировал твой код:jsfiddle.net/bumpy009/wpHKe/7  Это выглядит большим в хром ... domino
0

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

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

Похожие вопросы