Атрибут size тега <select> — скільки пунктів списку видно

Атрибут size визначає кількість видимих опцій в списку (висоту списку).

Якщо значення атрибута size більше 1, але менше, ніж загальне число елементів в списку, браузер додасть смугу прокрутки, щоб вказати, що є більше можливостей для перегляду.

автор: с3с

Загальний опис

автор: NagarD

Нотатка: У Chrome і Safari, цей атрибут може не працювати як очікувалося для значень size="2" та size="3".
автор: с3с

Синтаксис

<select size="number">...</select>

Атрибут size може отримувати єдине значення:

number

Число видимих елементів в списку. Значення без задання дорівнює 1.

Якщо атрибут multiple присутній, то значення без задання дорівнює кількості елементів в списку.

автор: с3с

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
	1	1	3	15	12	≤11

Підтримка: мобільні переглядачі
Переглядач
	142	142	4	—

Приклади

+ запропонувати свій приклад у пісочниці

В цьму прикладі ви можтте задати атрибут size в межах від 0 до 50.

HTML

<p>Приклад роботи атрибута size</p> 



<label for="tentacles">Введіть значення size:</label>

<input  id="range" type="number" name="tentacles"
       min="0" max="50" value="0">
  <input type="button" value="Задати" onClick="f()">
<hr>
   <select id="select1" name="type" size="6" required>
    <option value = "Програміст">Програміст</option>
    <option value = "Системний аміністратор">Системний аміністратор</option>
    <option value = "Маркетолог">Маркетолог</option>
    <option value = "Дизайнер">Дизайнер </option>
 </select>

CSS

div{
  padding:10px;
  float:left;
  height:150px;
  border:1px solid ;
}

select:focus{
  border: 2px solid #ff0000;  
}

function f() {
  var range = document.getElementById("range").value;
  var element = document.getElementById("select1");

  element.setAttribute("size", range);
}
//# sourceURL=pen.js

автор: с3с

Списки з різними size: від згорнутого до восьмирядкового над двома пунктами (видно порожні рядки). Далі — некоректні значення, які лишають список згорнутим, поведінка multiple, висота, задана стилями замість атрибута, і підписи optgroup, що теж займають рядок.

HTML

<p class="head">Скільки рядків видно</p>
<div class="row">
    <label>без size
        <select>
            <option>Київ</option><option>Львів</option><option>Одеса</option>
            <option>Харків</option><option>Дніпро</option>
        </select></label>
    <label>size="1"
        <select size="1">
            <option>Київ</option><option>Львів</option><option>Одеса</option>
            <option>Харків</option><option>Дніпро</option>
        </select></label>
    <label>size="4"
        <select size="4">
            <option>Київ</option><option>Львів</option><option>Одеса</option>
            <option>Харків</option><option>Дніпро</option>
        </select></label>
    <label>size="8", а пунктів два
        <select size="8"><option>Київ</option><option>Львів</option></select></label>
</div>

<p class="head">Некоректні значення — список лишається згорнутим</p>
<div class="row">
    <label>size="0"
        <select size="0"><option>Київ</option><option>Львів</option><option>Одеса</option></select></label>
    <label>size="-3"
        <select size="-3"><option>Київ</option><option>Львів</option><option>Одеса</option></select></label>
    <label>size="3abc" — читається як 3
        <select size="3abc"><option>Київ</option><option>Львів</option><option>Одеса</option></select></label>
</div>

<p class="head">multiple живе за своїми правилами</p>
<div class="row">
    <label>multiple без size — чотири рядки
        <select multiple>
            <option>Київ</option><option>Львів</option><option>Одеса</option>
            <option>Харків</option><option>Дніпро</option>
        </select></label>
    <label>multiple size="1" — усе одно перелік
        <select multiple size="1">
            <option>Київ</option><option>Львів</option><option>Одеса</option>
        </select></label>
</div>

<p class="head">Висоту надійніше задавати стилями</p>
<div class="row">
    <label>size="4"
        <select size="4">
            <option>Київ</option><option>Львів</option><option>Одеса</option>
            <option>Харків</option><option>Дніпро</option>
        </select></label>
    <label>size="4" плюс height: 40px — виграє правило
        <select size="4" class="h">
            <option>Київ</option><option>Львів</option><option>Одеса</option>
            <option>Харків</option><option>Дніпро</option>
        </select></label>
</div>

<p class="head">Підпис optgroup теж займає рядок</p>
<div class="row">
    <label>size="4", дві групи по два пункти
        <select size="4">
            <optgroup label="Захід"><option>Львів</option><option>Ужгород</option></optgroup>
            <optgroup label="Схід"><option>Харків</option><option>Суми</option></optgroup>
        </select></label>
</div>

CSS

.head {
    margin: 22px 0 8px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

label {
    display: block;
    max-width: 200px;
    font: 600 13px/1.5 system-ui, sans-serif;
    color: #1b4f9c;
}

select {
    display: block;
    margin-top: 4px;
    min-width: 150px;
    padding: 2px;
    font: 15px/1.4 system-ui, sans-serif;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
}

.h {
    height: 40px;
}

автор: NagarD

Найпростіший приклад використання HTML атрибута size теґа <select>

HTML

<p>Приклад роботи атрибута size</p> 

<div>
<p>size = 6</p>
   <select name="type" size="6" required>
    <option value = "Програміст">Програміст</option>
    <option value = "Системний аміністратор">Системний аміністратор</option>
    <option value = "Маркетолог">Маркетолог</option>
    <option value = "Дизайнер">Дизайнер </option>
   </select>
</div>

<div>
<p>size = 4</p>
   <select name="type" size="4" required>
    <option value = "Програміст">Програміст</option>
    <option value = "Системний аміністратор">Системний аміністратор</option>
    <option value = "Маркетолог">Маркетолог</option>
    <option value = "Дизайнер">Дизайнер </option>
   </select>
</div>
<div>
<p>size = 2</p>
   <select name="type" size="2" required>
    <option value = "Програміст">Програміст</option>
    <option value = "Системний аміністратор">Системний аміністратор</option>
    <option value = "Маркетолог">Маркетолог</option>
    <option value = "Дизайнер">Дизайнер </option>
   </select>
</div>

<div>
<p>size = 1</p>
   <select name="type" size="1" required>
    <option value = "Програміст">Програміст</option>
    <option value = "Системний аміністратор">Системний аміністратор</option>
    <option value = "Маркетолог">Маркетолог</option>
    <option value = "Дизайнер">Дизайнер </option>
   </select>
</div>

CSS

div{
  padding:10px;
  float:left;
  height:150px;
  border:1px solid ;
}

select:focus{
  border: 2px solid #ff0000;  
}

автор: с3с

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Ваше ім'я Коментар

Як форматувати текст?

Пишемо	Виходить
`важливо` `акцент` `~~застаріле~~`	Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
`## Як працює каскад` `### Порядок оголошень`	Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
`[[css/property/color]]`	Посилання на сторінку довідника. Наберіть `[[` — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
`[[!sandbox/S0oh1hBm]]`	Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком `!`: наберіть `[[!` і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
`[MDN](https://developer.mozilla.org)`	Посилання на чужий сайт.
`![Схема каскаду](https://site.com/схема.png)`	Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру	Код усередині речення.
```css `.card { display: grid }` ```	Код блоком. Мова після трьох лапок вмикає підсвітку.
`- Походження` `1. Походження`	Перелік: маркований і нумерований.
`- [ ] дописати приклади` `- [x] перевірити в Firefox`	Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
`> Порядок важить лише за рівної ваги.`	Цитата на всю ширину абзацу.
`Специфічність` `: вага селектора; більша перемагає`	Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
`Каскад має три критерії[^1]` `[^1]: Походження, специфічність, порядок.`	Виноска: номер у тексті, примітка внизу сторінки. Без згадки `[^1]` у тексті примітка не з'явиться.
`Відповідь: \|\|сорок два\|\|`	Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
`\|\| Показати рішення` Задайте контейнеру `display: grid`. `\|\|`	Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок	Новий абзац. Щоб перенести рядок усередині абзацу, поставте `\` в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.