Атрибут size тега <select>

Описание

Атрибут size определяет количество видимых строк в элементе <select> без необходимости прокрутки. При значении больше 1 элемент отображается как прокручиваемый список, а не выпадающее меню.

Пример использования:

<select size="4"> <option>Пункт 1</option> <option>Пункт 2</option> <option>Пункт 3</option> <option>Пункт 4</option> <option>Пункт 5</option> </select>

Особенности работы:

  • При size="1" (по умолчанию) отображается как выпадающий список
  • При size>1 превращается в прокручиваемый список
  • Может использоваться вместе с multiple для множественного выбора
  • Высота элемента рассчитывается автоматически на основе размера шрифта

Рекомендации по выбору размера:

Количество опций Рекомендуемый size
Менее 5 Показывать все опции (size="5")
5-10 size="5" (оптимальный баланс)
Более 10 size="5-8" + прокрутка

Пример с множественным выбором:

<select size="5" multiple> <option>Январь</option> <option>Февраль</option> <option>Март</option> <option>Апрель</option> <option>Май</option> <option>Июнь</option> </select>

Стилизация:

<style> .custom-select { width: 200px; padding: 8px; border: 2px solid #4a90e2; border-radius: 4px; background-color: #f8f9fa; } </style> <select class="custom-select" size="3"> <option>Вариант 1</option> <option>Вариант 2</option> <option>Вариант 3</option> </select>

Особые случаи:

  • При size="1" и multiple некоторые браузеры игнорируют multiple
  • На мобильных устройствах поведение может отличаться
  • Высота может варьироваться в разных браузерах

Рекомендации:

  1. Используйте четные значения size для симметричного отображения
  2. Сочетайте с CSS для контроля ширины элемента
  3. Для длинных списков добавьте поиск или фильтрацию
  4. Тестируйте на различных разрешениях экрана