Список чекбоксов з прокруткою

по

18.10.2021

332

Знайти правильне рішення буває дуже не завжди просто, і коли рішення все-таки приходить після довгих пошуків, виникають думки про те, що задача, яка здавалася не простий, насправді простіше нікуди. В деяких формах на сайті іноді потрібно зробити список з чекбоксов. Але як ви знаєте в стандартному html немає такого елемента форми, які представляв з себе список з чекбоксов, з можливістю прокрутки. Виявилося, що можна обійтися і без нього в принципі.
Приклад дуже простий для розуміння, тому відразу дивимося код:

Toyota
Mercedes-Benz
Volkswagen
Mitsubishi
Audi
Nissan
BMW
Lexus

Група чекбоксов укладено між в тег div. Для цього тега в CSS визначається фіксований розмір, крім того задається параметр overflow:auto, який власне і включає смугу прокручування у випадку якщо встановлених розмірів блоку не достатньо для показу вмісту, в нашому випадку це чекбокси. Таким чином, візуально це виглядає як список чекбоксов з прокруткою, що і було потрібно отримати.

Результат:

Toyota
Mercedes-Benz
Volkswagen
Mitsubishi
Audi
Nissan
BMW
Lexus

Подібним чином у блоці можна розмістити будь-які елементи форми, і не тільки. Це зручно тим, що можна розміщувати дані, які хотілося б не розтягувати на весь простір на сайті, а вмістити у відведеному для нього місці, з можливістю скролінгу.

Додав: htmaker, 25.09.2014 р.
(2 голосів, середній: 5,00 з 5)

Завантаження…

Діліться з друзями:

См. також:

Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO

Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript

Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека

Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript

Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript

Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript

Список вибору на JQuery
Рубрика: Html, CSS, Javascript

Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript

Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript