Пользовательские интерфейсы на веб-страницах имеют множество полезных элементов. Одним из них является the checkbox (или «чекбокс»). Этот компонент может быть различных видов, он предусматривает разнообразные стилистики.
Далее предстоит поближе познакомиться с checkbox, а также научиться работать с этим компонентом. За основу будут взяты CSS и HTML. Это связано с тем, что чекбоксы в основном встречаются на веб-страницах.
Предложенная информация рассчитана на широкую публику. Она подойдет как новичкам для изучения CSS-стилей, так и уже опытным разработчикам. Предложенные примеры CSS checkbox помогут создавать самые разные, продвинутые и эффектные элементы на веб-страницах и в формах.
Определение
The checkbox – элемент, который относится к пользовательскому интерфейсу. Он дает возможность пользователю выбрать несколько пунктов или опций из предложенного набора (списка).
Иногда the checkbox называют «галочкой» или «флажком». Такое описание напрямую связано с интерпретацией кодового компонента. Обычно чекбоксы представляют собой квадратные поля, которые могут быть отмечены (заполнены) или не отмечены (являться пустыми).
The checkboxes используются в формах и фильтрах на сайтах/в приложениях для выбора нескольких вариантов из перечня. Пример – указание желаемых критериев поиска продукции.
Смысл и предназначение
Чекбоксы на экране – это поля с галочками или крестиками. Они являются простыми, но мощными и многофункциональными инструментами дизайна пользовательского интерфейса. С помощью таких компонентов можно подтверждать выбор.
У чекбоксов имеются два составных элемента:
- поле, которое поддерживает два варианта состояния;
- ярлык (название).
The checkbox по традиции имеет квадратную форму. Соответствующее поле может быть включено или отключено. В первом случае внутри квадрата отображается какая-либо отметка. Примеры: галочка, крестик, окрашенная область поля. Во втором – флажок остается пустым.
The checkbox label может появляться в нескольких местах на сайтах:
- В выпадающих списках. В данном случае люди легко и быстро смогут отмечать предпочтения на веб-порталах, сайтах услуг, интернет-магазинах. Также пользователям удастся оформлять заказы, чистить корзины, выбирать дополнительные опции и так далее.
- В онлайн-анкетах. Некоторые бланки опросов дают возможность выбора нескольких вариантов из предложенного списка. Это отличный вариант для того, чтобы не прописывать различные утверждения вручную.
- Перед кнопкой отправки данных в пользовательских формах. Обычно такой чекбокс будет выступать подтверждением того, что клиент прочитал и принял пункт/соглашение.
- В электронной почте. Здесь предлагается выборка нескольких писем для дальнейшего взаимодействия. Пример – можно отметить все сообщения прочитанными/непрочитанными, переместить отмеченные письма в папку или удалить.
- В капчах. Captcha – способ защиты от спама и роботов на веб-сайтах и в приложениях. Современные каптчи часто представлены полями, в которых нужно поставить галочки, иногда решая простые задачи. Пример – отыскать картинки на заданную тематику.
Это основные виды чекбоксов. Рассматриваемые элементы могут встречаться и в других частях сайтов/приложений. Здесь все зависит от фантазии и навыков разработчиков.
Смежные понятия
Перед созданием и стилизацией чекбоксов CSS, необходимо сначала познакомиться с несколькими смежными понятиями. Они тоже пригодятся разработчикам, которые планируют создавать функциональные сайты:
- Переключатель – компонент пользовательского интерфейса, который дает возможность переключения между двумя состояниями объекта/функции. Обычно: включено и выключено. Представляет собой небольшую кнопку, которую двигают вправо-влево. Это помогает менять состояния. Левое положение – «выключено», правое – «включено».
- Радиокнопка – элемент, позволяющий пользователям выбирать один вариант из набора взаимоисключающих компонентов. Обычно представлена небольшим кругом, который выбирается (заполняется) или остается неактивным (пустым). Часто встречается в формах для указания только одного варианта из предложенного списка. Все остальные записи перечня автоматически становятся невыбранными.
- Выпадающий список – компонент, который дает возможность выбора одного или нескольких вариантов из множества. Это небольшая стрелка, нажатие на которую влечет за собой разворачивание некоторого перечня. Выпадающие списки используются везде, где требуется компактно уместить в один элемент множество однородных вариантов. Внутри могут располагаться чекбоксы и радиокнопки.
Все перечисленные компоненты, помимо the checkbox, используются в одних и тех же программных проектах. Они связаны друг с другом, но имеют колоссальную разницу в функциональных возможностях и ситуациях, при которых их необходимо использовать. Из-за этого начинающие дизайнеры должны хорошо разбираться в the checkboxes и смежных понятиях.
Классический чекбокс
Перед тем как формировать CSS Checkbox, необходимо научиться создавать «обычные» чекбоксы. Кастомный переключатель осуществляется за счет скрытия стандартного элемента и создания за счет CSS «поддельного» – такого, какого хочет пользователь.
Операция возможна за счет переключения состояния checked в HTML не точно через input, но и за счет связанного с ним label. Связь label и input может производиться за счет нескольких способов:
- Помещение input-компонента в label:
.
- Заданием input атрибута id, а label – for с аналогичным значением как у id:
.
Далее предстоит научиться создавать классические чекбоксы, а также добавлять к ним различные стили CSS. А еще – рассмотреть самые интересные и функциональные варианты оформления the checkbox с HTML-кодами.
Основной пример будет рассмотрен на базе списка ингредиентов для пиццы. К стандартной форме предстоит прикрепить стили, которые увеличат надписи и анимируют их. По умолчанию the checkbox – это маленькие и кликабельные элементы.
Выше – пример простейшего чекбокса с вопросом и небольшим списком. Именно к нему будут добавляться стили и функциональность.
Подключение нормализатора
Чтобы the HTML checkbox style работал одинаково во всех браузерах, требуется подключить нормализатор CSS. Он представляет собой специальный набор стилей, который приводит содержимое страницы к единому виду в браузере.
Для подключения используется следующий код:
<link rel=»stylesheet»
href=»https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css»>
Сразу можно подключить файл со стилями. На данный момент он будет пустым:
Теперь предстоит внедрить the checkbox custom style css. Делаться это будет поэтапно.
Изменение внешнего вида
Чтобы обеспечить анимационные эффекты у галочек, можно отрисовать элементы вручную через SVG-графику и использовать получившиеся компоненты для анимации. Для этого потребуется учитывать и проделывать следующие действия:
- Воспользоваться тегом label для подписи чекбокса. На этом этапе пишется id компонента, который подписывается. Им станет весь the checkbox.
- Внутри соответствующего тега размещается input. Он отвечает за создание the checkbox.
- Для чекбокса указывается стиль. Это необходимо для его дальнейшей настройки. Также указывается id, чтобы подпись поняла, к чему именно она имеет отношение.
- Добавить ниже SVG-пространство. В нем отрисовываются галочки и рамки.
- Рамка отображается сразу. Видимость галочки управляется за счет стилей.
- Подпись the checkbox добавляется в теге span.
The checkbox HTML CSS стиль добавлен, но размеры теперь «сломались». Такой результат вышел из-за того, что для галочки и чекбокса отсутствуют стили. Они формируются в документе style.css.
Чекбокс появился, но отметку-галочку в нем пока поставить не получается. Необходимо настроить input type checkbox-label для соответствующей операции:
Эта запись указывает на то, что стиль применяется к компонентам класса .checkbox__icon.trick. Они идут в HTML-коде сразу после отмеченного элемента the checkbox input. Если между элементами с этими классами вставить другой тег, ничего работать не будет. Подобный прием позволяет управлять поведением компонентов на экране.
Прочие чекбоксы и их объединение
Чтобы на экране отобразился the checkbox CSS с анимированными галочками, необходимо вернуться в HTML-код и добавить остальные ингредиенты для пиццы. Для этого используются операции копирования и вставки. Достаточно лишь поменять id-числа у чекбоксов:
Полученные чекбоксы стоят в ряд. Их лучше объединить так, чтобы варианты ингредиентов были написаны друг под другом. А еще рекомендуется добавить автоподсчет отмеченных пунктов.
Для объединения the checkbox-label в HTML-документе рекомендуется использовать тег div. Можно сформировать отдельный класс для оформления чекбоксов:
В файле CSS checkbox прописывается код:
Основные действия происходят в строке .check-group > * + *. Она означает следующее:
- Символ «больше» указывает на то, что правило будет относиться к компонентам, лежащим внутри тега с классом .check-group.
- Звездочка указывает на то, что правило относится ко всем компонентам класса.
- Плюс ссылается на применение предыдущего правила только тогда, когда предыдущий (любой вложенный) и следующий (тоже вложенный) компоненты идут друг за другом.
- Вторая звездочка также указывает на то, что следующий элемент может быть любым.
Теперь можно подсчитать отмеченные галочки и вывести результат на экран.
Подсчет и вывод
Для увеличения значения счетчика на единицу в the CSS-checkbox необходимо использовать команду counter-increment. Она позволит посчитать количество всех доступных вариантов выборки:
А теперь можно посчитать отмеченные компоненты:
Для вывода результатов внутри общего блока в самом конце нужно вставить строчку:
Чтобы страница смогла правильно заполнить содержимое, используются два стиля: для блока с надписью, а также стиль с псевдоклассом after, который срабатывает после отрисовки остальных стилей:
Здесь можно увидеть получившийся результат.
Лучшие примеры стилей
Теперь понятно, как осуществить input-checkbox-style. Далее будут предложены несколько самых интересных стилей для веб-страниц. Эта стилистика поможет сделать сервис более красивым и функциональным.
Флаг с градиентом
Градиент – отличный способ выделения определенных компонентов или фонов. Здесь в качестве него используется фон флажка:
Стили флажков в предложенном примере анимированы и предлагают два варианта: один – более простой и классический переключатель, а второй – оригинальный.
Тематический дизайн
Плоский тематический дизайн и анимированная кнопка-переключатель хорошо впишется в веб-сайт, выполненный в неоморфизме. Анимация здесь легкая и современная:
Цвет состояний включения и выключения может быть настроен по собственному усмотрению.
Разные анимации CSS
А вот стилизация checkbox, которая может называться полноценной коллекцией. Она позволяет настроить три способа выделения из списка желаемого пункта.
У первого набора есть эффекты наведения, у второго – более традиционные ползунки. Третий набор будет точно таким же, но с другим стилем.
Коллекции флажков
А вот the CSS-checkbox, который позволяет задать несколько стилей для самих флажков:
С их помощью получится создавать уникальные веб-страницы. Все они используют CSS.
Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus. В частности, вас может заинтересовать курс, посвященный FullStack-разработке, первой ступенью которого является изучение HTML/CSS.
