О web-разработке
и даже немного больше...

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

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

<div style="width:200px; height:100px; overflow:auto; border:solid 1px #C3E4FE;">
<input type="checkbox" />Toyota
<input type="checkbox" />Mercedes-Benz
<input type="checkbox" />Volkswagen
<input type="checkbox" />Mitsubishi
<input type="checkbox" />Audi
<input type="checkbox" />Nissan
<input type="checkbox" />BMW
<input type="checkbox" />Lexus
</div>

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

Результат:

Toyota
Mercedes-Benz
Volkswagen
Mitsubishi
Audi
Nissan
BMW
Lexus

Подобным образом в блоке можно разместить любые элементы формы, и не только. Это удобно тем, что можно размещать данные, которые хотелось бы не растягивать на всё пространство на сайте, а уместить в отведенном для него месте, с возможностью скроллинга.

Опубликован: 25.09.2014 г.

См. также:

Делаем кнопки «Поделиться в соцсетях»
Стрелочные функции в JS
Мобильное меню для сайта на CSS
Опасность использования атрибута target="_blank"
Бесконечная анимация вращения на CSS
Анимация вращения при наведении курсора
Стилизация выделения номера телефона в мобильных браузерах
Эффекты кнопок для сайта

Комментарии

  1. Andr пишет:

    Работает если только после каждого названия указать тег br

  2. MaxProCode пишет:

    Вот как в примере у автора код работает

    Toyota
    Mercedes-Benz
    Volkswagen
    Mitsubishi
    Audi
    Nissan
    BMW
    Lexus

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарии
  • Загрузка...
Друзья сайта