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

Question

Первый вопрос ...

У меня проблемы с получением ЛЮБОГО из выпадающего меню / Input Select, которые появляются с размером 18 шрифта в Safari.

Отлично работает в FF.

Код:

<form class="form">
<select name="make">
<option value="0"> All</option>
</select>
</form>

Css:

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

Есть идеи? Можете посмотреть в прямом эфире на [http://www.motolistr.com][1]

Лучший, Ник

РЕДАКТИРОВАТЬ 1: Спасибо за быстрый ответ. Я добавил стиль к самому выбору, чтобы избежать путаницы. Я старался;

<select name='make' style='font-size: 18pt;'>
 </select>

И

<select name='make' style='font-size: 18px;'>
 </select>

И

<select name='make' style='font-size: 1.3em;'>
 </select>

По-прежнему не работает в SAFARI ... Опять FF отлично работает со всеми 3.

Лучший, Ник

Answer 1

Чтобы оформить выделение в Safari, сначала нужно отключить стилизацию ОС:

select {
    -webkit-appearance: none;
}

Answer 2

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

Answer 3

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

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

Будет работать в Safari

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

Не будет работать в Safari

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

Answer 4

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

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

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

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

Answer 5

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

select{-webkit-appearance: none}

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

Answer 6

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

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

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

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

Answer 7

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

Answer 8

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

РЕДАКТИРОВАТЬ : Оказывается, что при выборе стиля Aqua доступны только три разных размера шрифта. Если вам нужно установить точный размер шрифта, вы можете отключить Aqua, придав элементу цвет фона, а затем установить размер. К вашему сведению, кажется, что 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;
 }

Answer 9

попробуйте

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

Answer 10

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

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