Выберите размер атрибута размера, не работающий в Chrome/Safari?

Как решить проблему, которая выбирает размер атрибута, например, в коде:

<select size="2">
    <option value="0" selected="selected">Default</option>
    <option value="1">select 1</option>
    <option value="2">select 2</option>
    <option value="3">select 3</option>
</select>

Как я могу заставить его работать в Chrome и Safari?

Ответ 1

Это известная ошибка в браузерах webkit.

Самый простой способ заставить его работать так, как вам нравится в Chrome и Safari, - это вручную указать стиль самого выбора.

Вот рабочий jsFiddle.

select {
  height: 36px;
  font-size: 14px;
}

<select size="2">
  <option value="0" selected="selected">Default</option>
  <option value="1">select 1</option>
  <option value="2">select 2</option>
  <option value="3">select 3</option>
</select>

Ответ 2

Я использую атрибут size в HTML для "других" браузеров, а затем указываю внешний вид webkit в CSS. Доступны другие типы опций меню, текстовое поле - не единственное. И вам, возможно, понадобится испортить высоту на основе размера шрифта. Это делает его примерно одинаковым во всех браузерах.

CSS

select{
  -webkit-appearance: menulist-textfield;
  height: 45px;
}

Ответ 3

Я смог решить эту проблему, добавив опцию "несколько" к тегу выбора.

Ответ 4

Включить height: auto и она должна работать.

<select size="2" style="height: auto">
    <option value="0" selected="selected">Default</option>
    <option value="1">select 1</option>
    <option value="2">select 2</option>
    <option value="3">select 3</option>
</select>

Ответ 5

Попробуйте использовать свойство css width тега select:

select {
  width:value px;
}