Размер текста для выпадающего меню/выбора ввода не работает в Safari

Ответ 1

Чтобы создать стиль в Safari, сначала нужно отключить стиль os:

select {
    -webkit-appearance: none;
}

Ответ 2

Прикольная вещь: если вы измените свойства background - или border на вашем select, Safari тоже внезапно применит ваш font-size.

Ответ 3

Я выяснил, как сафари подберет размер шрифта... все, что вам нужно сделать, это установить цвет рамки, например следующий.

-webkit-appearance: none; заставит вас потерять все атрибуты сафари, например стрелки... ниже вы можете увеличить размер, не теряя этого.

Работает в Safari

<select style=" font-size: 3em; border: black;">
    <option>TEXT</option>
</select>

Не работает в Safari

<select style=" font-size: 3em;">
    <option>TEXT</option>
</select>

Ответ 4

Элементы управления select, которые не выбираются в Safari; он всегда использует свои собственные процедуры рисования виджета в стиле X-X, чтобы отображать их. До недавнего времени это было нормой: браузеры обычно используют простые виджеты, предоставленные ОС для полей формы. CSS2 на самом деле не говорит, как стили должны применяться к полям формы (если вообще).

Некоторые браузеры сегодня применяют стиль шрифта выбора к параметрам (IE7, Opera); некоторые из них позволяют выбирать на странице, а всплывающие параметры могут быть изменены по-разному (Mozilla, Chrome), поэтому лучшее, что вы можете сделать для обеспечения согласованности:

.form select, .form option {
    font: Whatever 18px;
}

Но если вам абсолютно нужно стилизованное раскрытие в Safari, вам нужно будет написать свой собственный неуклюжий ерзац-select в JavaScript. (Или см. Один из многих существующих сценариев и плагинов рамки, которые это делают.)

Ответ 5

Прежде всего, это

.form input{
font-size:18px;
margin-bottom:0px;
}

не будет работать, потому что вы не стилируете элемент выбора, в который вы вводите элементы стиля. Попробуйте это, и это, скорее всего, сработает.

.form select {
font-size:18px;
margin-bottom:0px;
}

Ответ 6

По крайней мере, в Safari 5.1 (у меня больше нет работы 3) вы можете отключить стиль по умолчанию:

select{-webkit-appearance: none}

Затем он будет соответствовать размеру вашего шрифта.

Ответ 7

select технически не тег input. Попробуйте назначить класс выбранному и задайте стиль для класса.

РЕДАКТИРОВАТЬ. Оказывается, что в стиле Aqua есть только три разных размера шрифта. Если вам нужно установить точный размер шрифта, вы можете отключить Aqua, указав элемент фона, а затем задайте размер. FYI, похоже, что 20px работает без установки фона, поэтому он должен быть размером до следующего поддерживаемого размера Aqua.

Ссылка: http://particletree.com/notebook/design-friendly-select-elements-in-safari-3/. Страница тестирования с различными стилями в http://particletree.com/examples/safari3/drop.html.

 <select name='make' class='big-input'>
 </select>


 .big-input
 {
     background: #fff; // turns off Aqua
     font-size: 18pt; // assuming you meant 18pt, not 18px
     margin-bottom: 0px;
 }

Ответ 8

Установка высоты линии: 100% будет ограничивать высоту окна выбора для более последовательного просмотра, но она по-прежнему не влияет на фактический размер шрифта.

Ответ 9

Я нашел способ изменить размер шрифта элемента select в Safari с помощью процентов.
Затем ваш код будет выглядеть следующим образом:

<select name='make' style='font-size: 120%;'></select>

Для размера шрифта 13px (который я нашел очень привлекательным).

Это проверено в Safari 5.1.3

Ответ 10

Вы можете настроить тег Safari select, выполнив следующие действия:

select {
    width: 224px;
    line-height: 1.8;  (This can be in px too)
}

Ответ 11

попробуйте это

<style>
select { border:0; color:#000000; background:transparent;
font-size:20px; font-weight:bold; padding:2px 10px; width:378px;
*width:350px; *background:#FFFFFF; -webkit-appearance: none; }

#mainselection { overflow:hidden; width:350px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 1px 1px 11px #330033;
background: url("img/arrow.gif") no-repeat scroll 319px 5px #FFFFFF; 
}
</style>