Чекбоксы и их стилизация

Пользовательские интерфейсы на веб-страницах имеют множество полезных элементов. Одним из них является the checkbox (или «чекбокс»). Этот компонент может быть различных видов, он предусматривает разнообразные стилистики.

Далее предстоит поближе познакомиться с checkbox, а также научиться работать с этим компонентом. За основу будут взяты CSS и HTML. Это связано с тем, что чекбоксы в основном встречаются на веб-страницах.

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

Определение

The checkbox – элемент, который относится к пользовательскому интерфейсу. Он дает возможность пользователю выбрать несколько пунктов или опций из предложенного набора (списка).

Иногда the checkbox называют «галочкой» или «флажком». Такое описание напрямую связано с интерпретацией кодового компонента. Обычно чекбоксы представляют собой квадратные поля, которые могут быть отмечены (заполнены) или не отмечены (являться пустыми).

The checkboxes используются в формах и фильтрах на сайтах/в приложениях для выбора нескольких вариантов из перечня. Пример – указание желаемых критериев поиска продукции.

Смысл и предназначение

Чекбоксы на экране – это поля с галочками или крестиками. Они являются простыми, но мощными и многофункциональными инструментами дизайна пользовательского интерфейса. С помощью таких компонентов можно подтверждать выбор.

У чекбоксов имеются два составных элемента:

• поле, которое поддерживает два варианта состояния;
• ярлык (название).

The checkbox по традиции имеет квадратную форму. Соответствующее поле может быть включено или отключено. В первом случае внутри квадрата отображается какая-либо отметка. Примеры: галочка, крестик, окрашенная область поля. Во втором – флажок остается пустым.

The checkbox label может появляться в нескольких местах на сайтах:

1. В выпадающих списках. В данном случае люди легко и быстро смогут отмечать предпочтения на веб-порталах, сайтах услуг, интернет-магазинах. Также пользователям удастся оформлять заказы, чистить корзины, выбирать дополнительные опции и так далее.
2. В онлайн-анкетах. Некоторые бланки опросов дают возможность выбора нескольких вариантов из предложенного списка. Это отличный вариант для того, чтобы не прописывать различные утверждения вручную.
3. Перед кнопкой отправки данных в пользовательских формах. Обычно такой чекбокс будет выступать подтверждением того, что клиент прочитал и принял пункт/соглашение.
4. В электронной почте. Здесь предлагается выборка нескольких писем для дальнейшего взаимодействия. Пример – можно отметить все сообщения прочитанными/непрочитанными, переместить отмеченные письма в папку или удалить.
5. В капчах. Captcha – способ защиты от спама и роботов на веб-сайтах и в приложениях. Современные каптчи часто представлены полями, в которых нужно поставить галочки, иногда решая простые задачи. Пример – отыскать картинки на заданную тематику.

Это основные виды чекбоксов. Рассматриваемые элементы могут встречаться и в других частях сайтов/приложений. Здесь все зависит от фантазии и навыков разработчиков.

Смежные понятия

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

1. Переключатель – компонент пользовательского интерфейса, который дает возможность переключения между двумя состояниями объекта/функции. Обычно: включено и выключено. Представляет собой небольшую кнопку, которую двигают вправо-влево. Это помогает менять состояния. Левое положение – «выключено», правое – «включено».
2. Радиокнопка – элемент, позволяющий пользователям выбирать один вариант из набора взаимоисключающих компонентов. Обычно представлена небольшим кругом, который выбирается (заполняется) или остается неактивным (пустым). Часто встречается в формах для указания только одного варианта из предложенного списка. Все остальные записи перечня автоматически становятся невыбранными.
3. Выпадающий список – компонент, который дает возможность выбора одного или нескольких вариантов из множества. Это небольшая стрелка, нажатие на которую влечет за собой разворачивание некоторого перечня. Выпадающие списки используются везде, где требуется компактно уместить в один элемент множество однородных вариантов. Внутри могут располагаться чекбоксы и радиокнопки.

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

Классический чекбокс

Перед тем как формировать CSS Checkbox, необходимо научиться создавать «обычные» чекбоксы. Кастомный переключатель осуществляется за счет скрытия стандартного элемента и создания за счет CSS «поддельного» – такого, какого хочет пользователь.

Операция возможна за счет переключения состояния checked в HTML не точно через input, но и за счет связанного с ним label. Связь label и input может производиться за счет нескольких способов:

1. Помещение input-компонента в label:.
2. Заданием 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-графику и использовать получившиеся компоненты для анимации. Для этого потребуется учитывать и проделывать следующие действия:

1. Воспользоваться тегом label для подписи чекбокса. На этом этапе пишется id компонента, который подписывается. Им станет весь the checkbox.
2. Внутри соответствующего тега размещается input. Он отвечает за создание the checkbox.
3. Для чекбокса указывается стиль. Это необходимо для его дальнейшей настройки. Также указывается id, чтобы подпись поняла, к чему именно она имеет отношение.
4. Добавить ниже SVG-пространство. В нем отрисовываются галочки и рамки.
5. Рамка отображается сразу. Видимость галочки управляется за счет стилей.
6. Подпись 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 > * + *. Она означает следующее:

1. Символ «больше» указывает на то, что правило будет относиться к компонентам, лежащим внутри тега с классом .check-group.
2. Звездочка указывает на то, что правило относится ко всем компонентам класса.
3. Плюс ссылается на применение предыдущего правила только тогда, когда предыдущий (любой вложенный) и следующий (тоже вложенный) компоненты идут друг за другом.
4. Вторая звездочка также указывает на то, что следующий элемент может быть любым.

Теперь можно подсчитать отмеченные галочки и вывести результат на экран.

Подсчет и вывод

Для увеличения значения счетчика на единицу в the CSS-checkbox необходимо использовать команду counter-increment. Она позволит посчитать количество всех доступных вариантов выборки:

А теперь можно посчитать отмеченные компоненты:

Для вывода результатов внутри общего блока в самом конце нужно вставить строчку:

Чтобы страница смогла правильно заполнить содержимое, используются два стиля: для блока с надписью, а также стиль с псевдоклассом after, который срабатывает после отрисовки остальных стилей:

Здесь можно увидеть получившийся результат.

Лучшие примеры стилей

Теперь понятно, как осуществить input-checkbox-style. Далее будут предложены несколько самых интересных стилей для веб-страниц. Эта стилистика поможет сделать сервис более красивым и функциональным.

Флаг с градиентом

Градиент – отличный способ выделения определенных компонентов или фонов. Здесь в качестве него используется фон флажка:

Стили флажков в предложенном примере анимированы и предлагают два варианта: один – более простой и классический переключатель, а второй – оригинальный.

Тематический дизайн

Плоский тематический дизайн и анимированная кнопка-переключатель хорошо впишется в веб-сайт, выполненный в неоморфизме. Анимация здесь легкая и современная:

Цвет состояний включения и выключения может быть настроен по собственному усмотрению.

Разные анимации CSS

А вот стилизация checkbox, которая может называться полноценной коллекцией. Она позволяет настроить три способа выделения из списка желаемого пункта.

У первого набора есть эффекты наведения, у второго – более традиционные ползунки. Третий набор будет точно таким же, но с другим стилем.

Коллекции флажков

А вот the CSS-checkbox, который позволяет задать несколько стилей для самих флажков:

С их помощью получится создавать уникальные веб-страницы. Все они используют CSS.

Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus. В частности, вас может заинтересовать курс, посвященный FullStack-разработке, первой ступенью которого является изучение HTML/CSS.