Установка высоты SELECT в IE

Ответ 1

Для этого нет необходимости в обслуживании, кроме того, чтобы отбросить элемент select.

Ответ 2

Правильно, что для этого нет необходимости в работе, кроме отвлечения элемента select, но если вам нужно показать больше элементов в списке выбора, вы можете просто использовать атрибут size:

<select multiple="multiple" size="15">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

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

Ответ 3

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

изменить:

Пример → http://www.bse.co.nz EDIT: (эта ссылка больше не актуальна)

для выбора рядом с большим полем поиска применяются следующие правила css:

#navigation #search .locationDrop {
    font-size:2em;
    line-height:27px;
    display:block;
    float:left;
    height:27px;
    width:200px;
}

Ответ 4

Да, вы можете.

Мне удалось установить высоту моего SELECT точно, что я хотел в IE8 и 9. Трюк заключается в том, чтобы установить свойство box-sizing на content-box. Это позволит установить область содержимого SELECT на высоту, но имейте в виду, что значения margin, border и padding не будут вычисляться по ширине/высоте SELECT, поэтому отрегулируйте эти значения соответственно.

select {
    display: block;
    padding: 6px 4px;
    -moz-box-sizing: content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    height: 15px;
}

Вот рабочий jsFiddle. Не могли бы вы подтвердить и отметить соответствующий ответ?

Ответ 5

Используйте библиотеку пользовательского интерфейса, например jquery или yui, который предоставляет альтернативу встроенному элементу SELECT, как правило, как часть реализации комбинированного блока.

Ответ 6

Даже если установка значения высота CSS select не работает, атрибут дополняющий работает нормально. Настройка верхнего и нижнего отступов сделает ваш элемент select более высоким.

Ответ 7

Наконец, найдено в http://viralpatel.net/blogs/2009/09/setting-height-selectbox-combobox-ie.html простое решение (по крайней мере для IE8):

font-size:      1.0em;

BTW, для Google Chrome, нашел это решение в Как стандартизировать высоту окна выбора между Chrome и Firefox? */

-webkit-appearance: menulist-button;

Ответ 8

Для этого есть обход (по крайней мере, для множественного выбора):

• установите атрибут размер атрибута в размер списка опций (используйте JavaScript или установите его на любое достаточно большое количество)
• установите max-height вместо атрибута height на желаемую высоту (проверен на IE9).

Ответ 9

Вы можете использовать замену: jQuery Chosen. Это выглядит потрясающе.

Ответ 10

select{
  *zoom: 1.6;
  *font-size: 9px;
}

Если вы измените свойства, размер select изменится и в IE7.

Ответ 11

См. также несогласованная модель окна между вводом, выбором,...

Ответ 12

вы могли бы сделать то же самое, что и в facebook, просто добавьте дополнение. Это не так хорошо, как хотелось бы, но выглядит достаточно хорошо.

Ответ 13

Не уверен, но я думаю, что это был вопрос не о высоте элемента "множественного" типа select, а о выпадающем типе элемента select. Я сталкивался с временами, когда раскрывающийся взгляд раздавлен и явно не отображает выбранное значение. Несомненно, это связано с использованием информации стиля CSS, используемой на странице. Единственный способ остановить это - либо изменить CSS (который, вероятно, повлияет на всю страницу или ее части таким образом, чтобы вы не нуждались в ней), либо использовать информацию стиля в самом элементе select, чтобы переопределить CSS, который сбивает его. Пример:

<select name="myselect" id="myselect" style="font-size:15px; height:30px">
<option value="someval">somedescr</option>
...
</select>

Надеюсь, что это поможет.

Ответ 14

Мне нужно было установить высоту поля выбора меньше, чем значение по умолчанию. я использовал

select {
   position: relative;
   height: 10px !important;
   display: inline-block;
}

это работает на ie7 и ie8. вам может понадобиться только свойство height, я просто добавил position и display, чтобы переопределить свойства, унаследованные выше от dom.