Выберите опцию font-size

Я создал эту скрипту в качестве примера того, что я делаю.

То, что я пытаюсь сделать, прекрасно работает в Firefox. При размере шрифта 14px при открытии опций выбора.

Однако, глядя на него в Google Chrome, он выбирает унаследованный размер шрифта 34px.

Я идеально ищут опции выбора размера шрифта 14px.

Можно ли это сделать?

Я готов внести любые исправления в jQuery, если они потребуются.

Спасибо

Код, указанный ниже...

Мой CSS:

.styled-select {
    overflow: hidden;
    height: 74px;
    float: left;
    width: 365px;
    margin-right: 10px;
    background: url(http://i50.tinypic.com/9ldb8j.png) no-repeat right center #5c5c5c;
}

.styled-select select {
    font-size: 34px;
    border-radius: 0;
    border: none;
    background: transparent;
    width: 380px;
    overflow: hidden;
    padding-top: 15px;
    height: 70px;
    text-indent: 10px;
    color: #ffffff;
    -webkit-appearance: none;
}

.styled-select option.service-small {
    font-size: 14px;
    padding: 5px;
    background: #5c5c5c;
}

Разметка HTML:

<div class="styled-select">
    <select class="service-area" name="service-area">
        <option selected="selected" class="service-small">Service area?</option>
        <option class="service-small">Volunteering</option>
        <option class="service-small">Partnership &amp; Support</option>
        <option class="service-small">Business Services</option>
    </select>
</div>

Ответы

Ответ 1

Одним из решений может быть объединение опций внутри optgroup:

HTML:

<optgroup>
  <option selected="selected" class="service-small">Service area?</option>
  <option class="service-small">Volunteering</option>
  <option class="service-small">Partnership &amp; Support</option>
  <option class="service-small">Business Services</option>
</optgroup>

CSS

optgroup { font-size:14px; }

Ответ 2

Как и большинство элементов управления формой в HTML, результаты применения CSS к элементам <select> и <option> сильно различаются между браузерами. Chrome, как вы уже нашли, не позволит вам применять стили шрифта и элементы шрифта непосредственно к элементу <option> - если вы проверите элемент Element на нем, вы увидите, что объявление font-size: 14px перечеркнуто так, как будто оно был перекрыт каскадом, но на самом деле потому, что Chrome игнорирует его.

Однако Chrome позволит применять стили шрифтов к элементу <optgroup>, поэтому для достижения результата, который вы хотите, вы можете обернуть все <option> в <optgroup>, а затем примените стили шрифта к селектору .styled-select optgroup. Если вам нужна метка optgroup sans-label, вам может понадобиться сделать какой-нибудь умный CSS с позиционированием или чем-то, чтобы скрыть белую область вверху, где будет отображаться метка, но это должно быть возможно.

Спрятал новый JSFiddle, чтобы показать вам, что я имею в виду:

http://jsfiddle.net/zRtbZ/

Ответ 3

Я знаю, что это старый Q & A (~ 2013), но я хотел поделиться отличным решением, которое я только что нашел, которое действительно работает на всех (большинстве) браузерах:

Чистый стиль выбора CSS-стиля - переопределите стили раскрывающегося списка по умолчанию с помощью CSS

Опубликовано 22 сентября 2015 г. Джеффом Хейсом @robido.com

Я нашел этот stackoverflow Q & Во-первых, поэтому хотел поделиться тем, что нашел с другими, которые могут столкнуться с этим позже.

Ответ 4

.service-small option {
    font-size: 14px;
    padding: 5px;
    background: #5c5c5c;
}

Я думаю, это потому, что вы использовали .styled-select в начале кода класса.

Ответ 5

Вы пытаетесь изменить шрифт опции в стиле-select. Что вам нужно изменить, это шрифт опции в select в стиле-select.

.styled-select select > option.service-small{
    font-size: 34px;
    border-radius: 0;
    border: none;
    background: transparent;
    width: 380px;
    overflow: hidden;
    padding-top: 15px;
    height: 70px;
    text-indent: 10px;
    color: #ffffff;
    -webkit-appearance: none;
}

Ответ 6

Это работает для меня (jQuery):

$('select').css('font-size', '20px');