Rivalry2

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

2026-03-10 18:27 Diff

https://otus.ru/journal/chekboksy-i-ih-stilizaciya/oj-1080x720-9-23/

Определение
Смысл и предназначение
Смежные понятия
Классический чекбокс
Лучшие примеры стилей

Пользовательские интерфейсы на веб-страницах имеют множество полезных элементов. Одним из них является 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. Он представляет собой специальный набор стилей, который приводит содержимое страницы к единому виду в браузере.

Для подключения используется следующий код:

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.


<!DOCTYPE html>
<html dir="ltr" lang="ru-RU">

<head>

	<meta charset="UTF-8" />
	<meta http-equiv="x-ua-compatible" content="ie=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="profile" href="http://gmpg.org/xfn/11" />
	
	<title>Чекбоксы и их стилизация OTUS</title>

		<!-- All in One SEO 4.5.2.1 - aioseo.com -->
		<meta name="description" content="Пользовательские интерфейсы на веб-страницах имеют множество полезных элементов. Одним из них является the checkbox (или «чекбокс»). Этот компонент может быть различных видов, он предусматривает разнообразные стилистики. Далее предстоит поближе познакомиться с checkbox, а также научиться работать с этим компонентом. За основу будут взяты CSS и HTML. Это связано с тем, что чекбоксы в основном встречаются" />
		<meta name="robots" content="max-image-preview:large" />
		<link rel="canonical" href="https://otus.ru/journal/chekboksy-i-ih-stilizaciya/" />
		<meta name="generator" content="All in One SEO (AIOSEO) 4.5.2.1" />
		<script type="application/ld+json" class="aioseo-schema">
			{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/otus.ru\/journal\/chekboksy-i-ih-stilizaciya\/#article","name":"\u0427\u0435\u043a\u0431\u043e\u043a\u0441\u044b \u0438 \u0438\u0445 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f OTUS","headline":"\u0427\u0435\u043a\u0431\u043e\u043a\u0441\u044b \u0438 \u0438\u0445 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f","author":{"@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author"},"publisher":{"@id":"https:\/\/otus.ru\/journal\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2023\/11\/oj-1080x7209-1.jpg","width":2245,"height":1587},"datePublished":"2023-11-07T21:12:53+00:00","dateModified":"2023-12-19T19:30:40+00:00","inLanguage":"ru-RU","mainEntityOfPage":{"@id":"https:\/\/otus.ru\/journal\/chekboksy-i-ih-stilizaciya\/#webpage"},"isPartOf":{"@id":"https:\/\/otus.ru\/journal\/chekboksy-i-ih-stilizaciya\/#webpage"},"articleSection":"\u041f\u043e\u043b\u0435\u0437\u043d\u043e\u0435, CSS, frontend, HTML, \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434"},{"@type":"BreadcrumbList","@id":"https:\/\/otus.ru\/journal\/chekboksy-i-ih-stilizaciya\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/otus.ru\/journal\/#listItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/otus.ru\/journal\/","nextItem":"https:\/\/otus.ru\/journal\/chekboksy-i-ih-stilizaciya\/#listItem"},{"@type":"ListItem","@id":"https:\/\/otus.ru\/journal\/chekboksy-i-ih-stilizaciya\/#listItem","position":2,"name":"\u0427\u0435\u043a\u0431\u043e\u043a\u0441\u044b \u0438 \u0438\u0445 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f","previousItem":"https:\/\/otus.ru\/journal\/#listItem"}]},{"@type":"Organization","@id":"https:\/\/otus.ru\/journal\/#organization","name":"\u041e\u0442\u0443\u0441 \u043e\u043d\u043b\u0430\u0439\u043d-\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435","url":"https:\/\/otus.ru\/journal\/","sameAs":["https:\/\/www.youtube.com\/channel\/UCetgtvy93o3i3CvyGXKFU3g"],"contactPoint":{"@type":"ContactPoint","telephone":"+74999389202","contactType":"Customer Support"}},{"@type":"Person","@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author","url":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/","name":"A. Pavlenko","image":{"@type":"ImageObject","@id":"https:\/\/otus.ru\/journal\/chekboksy-i-ih-stilizaciya\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d4c499a104d7c2522fa41f89e6819499?s=96&d=mm&r=g","width":96,"height":96,"caption":"A. Pavlenko"}},{"@type":"WebPage","@id":"https:\/\/otus.ru\/journal\/chekboksy-i-ih-stilizaciya\/#webpage","url":"https:\/\/otus.ru\/journal\/chekboksy-i-ih-stilizaciya\/","name":"\u0427\u0435\u043a\u0431\u043e\u043a\u0441\u044b \u0438 \u0438\u0445 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f OTUS","description":"\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u043d\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0438\u043c\u0435\u044e\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041e\u0434\u043d\u0438\u043c \u0438\u0437 \u043d\u0438\u0445 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f the checkbox (\u0438\u043b\u0438 \u00ab\u0447\u0435\u043a\u0431\u043e\u043a\u0441\u00bb). \u042d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0432\u0438\u0434\u043e\u0432, \u043e\u043d \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438\u0441\u0442\u0438\u043a\u0438. \u0414\u0430\u043b\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u0431\u043b\u0438\u0436\u0435 \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 checkbox, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u044d\u0442\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c. \u0417\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0431\u0443\u0434\u0443\u0442 \u0432\u0437\u044f\u0442\u044b CSS \u0438 HTML. \u042d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u044b \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442\u0441\u044f","inLanguage":"ru-RU","isPartOf":{"@id":"https:\/\/otus.ru\/journal\/#website"},"breadcrumb":{"@id":"https:\/\/otus.ru\/journal\/chekboksy-i-ih-stilizaciya\/#breadcrumblist"},"author":{"@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author"},"creator":{"@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2023\/11\/oj-1080x7209-1.jpg","@id":"https:\/\/otus.ru\/journal\/chekboksy-i-ih-stilizaciya\/#mainImage","width":2245,"height":1587},"primaryImageOfPage":{"@id":"https:\/\/otus.ru\/journal\/chekboksy-i-ih-stilizaciya\/#mainImage"},"datePublished":"2023-11-07T21:12:53+00:00","dateModified":"2023-12-19T19:30:40+00:00"},{"@type":"WebSite","@id":"https:\/\/otus.ru\/journal\/#website","url":"https:\/\/otus.ru\/journal\/","name":"OTUS JOURNAL","description":"Blog about IT","inLanguage":"ru-RU","publisher":{"@id":"https:\/\/otus.ru\/journal\/#organization"}}]}
		</script>
		<!-- All in One SEO -->

<link rel='dns-prefetch' href='//otus.ru' />
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='stylesheet' id='wp-block-library-css' href='https://otus.ru/journal/wp-includes/css/dist/block-library/style.min.css?ver=6.4.7' type='text/css' media='all' />
<style id='classic-theme-styles-inline-css' type='text/css'>
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
</style>
<style id='global-styles-inline-css' type='text/css'>
body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
.wp-block-navigation a:where(:not(.wp-element-button)){color: inherit;}
:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}
:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}
.wp-block-pullquote{font-size: 1.5em;line-height: 1.6;}
</style>
<link rel='stylesheet' id='wbcr-comments-plus-url-span-css' href='https://otus.ru/journal/wp-content/plugins/clearfy/components/comments-plus/assets/css/url-span.css?ver=2.2.0' type='text/css' media='all' />
<link rel='stylesheet' id='wpel-style-css' href='https://otus.ru/journal/wp-content/plugins/wp-external-links/public/css/wpel.css?ver=2.59' type='text/css' media='all' />
<link rel='stylesheet' id='ez-toc-css' href='https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/assets/css/screen.min.css?ver=2.0.61' type='text/css' media='all' />
<style id='ez-toc-inline-css' type='text/css'>
div#ez-toc-container .ez-toc-title {font-size: 120%;}div#ez-toc-container .ez-toc-title {font-weight: 500;}div#ez-toc-container ul li {font-size: 95%;}div#ez-toc-container nav ul ul li {font-size: 90%;}
.ez-toc-container-direction {direction: ltr;}.ez-toc-counter ul{counter-reset: item ;}.ez-toc-counter nav ul li a::before {content: counters(item, ".", decimal) ". ";display: inline-block;counter-increment: item;flex-grow: 0;flex-shrink: 0;margin-right: .2em; float: left; }.ez-toc-widget-direction {direction: ltr;}.ez-toc-widget-container ul{counter-reset: item ;}.ez-toc-widget-container nav ul li a::before {content: counters(item, ".", decimal) ". ";display: inline-block;counter-increment: item;flex-grow: 0;flex-shrink: 0;margin-right: .2em; float: left; }
</style>
<link rel='stylesheet' id='contentberg-fonts-css' href='https://fonts.googleapis.com/css?family=Roboto%3A400%2C500%2C700%7CPT+Serif%3A400%2C400i%2C600%7CIBM+Plex+Serif%3A500' type='text/css' media='all' />
<link rel='stylesheet' id='contentberg-core-css' href='https://otus.ru/journal/wp-content/themes/contentberg/style.css?ver=1.8.3' type='text/css' media='all' />
<link rel='stylesheet' id='contentberg-lightbox-css' href='https://otus.ru/journal/wp-content/themes/contentberg/css/lightbox.css?ver=1.8.3' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-css' href='https://otus.ru/journal/wp-content/themes/contentberg/css/fontawesome/css/font-awesome.min.css?ver=1.8.3' type='text/css' media='all' />
<script type="text/javascript" id="breeze-prefetch-js-extra">
/* <![CDATA[ */
var breeze_prefetch = {"local_url":"https:\/\/otus.ru\/journal","ignore_remote_prefetch":"1","ignore_list":["\/wp-admin\/"]};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/breeze/assets/js/js-front-end/breeze-prefetch-links.min.js" id="breeze-prefetch-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/jquery/jquery.min.js" id="jquery-core-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/jquery/jquery-migrate.min.js" id="jquery-migrate-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/lazysizes.js" id="lazysizes-js"></script>
<link rel="https://api.w.org/" href="https://otus.ru/journal/wp-json/" /><link rel="alternate" type="application/json" href="https://otus.ru/journal/wp-json/wp/v2/posts/7897" /><link rel='shortlink' href='https://otus.ru/journal/?p=7897' />
<link rel="alternate" type="application/json+oembed" href="https://otus.ru/journal/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fchekboksy-i-ih-stilizaciya%2F" />
<link rel="alternate" type="text/xml+oembed" href="https://otus.ru/journal/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fchekboksy-i-ih-stilizaciya%2F&#038;format=xml" />
<script>var Sphere_Plugin = {"ajaxurl":"https:\/\/otus.ru\/journal\/wp-admin\/admin-ajax.php"};</script><link rel="icon" href="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-32x32.png" sizes="32x32" />
<link rel="icon" href="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-180x180.png" />
<meta name="msapplication-TileImage" content="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-270x270.png" />
		<style type="text/css" id="wp-custom-css">
			#menu-item-10406 .wpel-icon {
    display: none;	
}

#menu-item-10407 .wpel-icon {
    display: none;	
}


.otus-login-site a  .wpel-icon {
	    display: none;	
}

.menu-menju-navykov-container a  .wpel-icon {
	    display: none;	
}

.otus-login-site a 
{
    background: #ffd709;
    border-radius: 12px;
    color: #0f0f10;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    display: block;
    text-align: center;
    padding: 8px 25px;
}

.main-footer.dark {  
    background: linear-gradient(90deg, #a64fc5, #4f54e6);
    border-color: transparent;
}


.main-footer.bold .copyright {
	    color: #fff;
}

.main-footer.bold .to-top i {
    color: #fff;
}

.main-footer.bold .back-to-top {
	    color: #fff;
}

.nav__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;	
}


.scrollable-menu .menu {
    display: flex;


}


.nav__scroll 
{
	    background: linear-gradient(90deg, #a64fc5, #4f54e6);
}


.scrollable-menu .menu .menu-item {
    flex: 0 0 auto;
    padding: 15px 15px;
}

.scrollable-menu .menu .menu-item  a {
    color: #fff;
}

.nav__scroll::-webkit-scrollbar{background-color:#fff;height:5px;}

.nav__scroll::-webkit-scrollbar-thumb{background-color:#dcdcdc;}

.nav__scroll::-webkit-scrollbar-track{-webkit-border-radius:0;border-radius:0;background-color:#fff;}/

body {
    min-width: 320px;	
}

.banner-click img {
	    margin: 0 auto;
    display: block;
}

.banner-click {
	    cursor: pointer;
}

.banner-footer-area {
	    margin-bottom: 20px;
}

.banner-left-area {
	margin-top: 40px;
}		</style>
		
<!--Start VDZ Yandex Metrika Plugin-->
<!-- Yandex.Metrika counter --><script type="text/javascript" >(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");ym(34531570, "init", {clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, trackHash:true, ecommerce:"dataLayer"});</script>
<noscript><div><img src="https://mc.yandex.ru/watch/34531570" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter --><!--START ADD EVENTS FROM CF7--><script type='text/javascript'>document.addEventListener( 'wpcf7submit', function( event ) {
					  //event.detail.contactFormId;
					  if(ym){
				          //console.log(event.detail);
						  ym(34531570, 'reachGoal', 'VDZ_SEND_CONTACT_FORM_7');
						  ym(34531570, 'params', {
						      page_url: window.location.href, 
						      status: event.detail.status, 
						      locale: event.detail.contactFormLocale, 
						      form_id: event.detail.contactFormId, 
						  });
					  }
					}, false );
				</script><!--END ADD EVENTS FROM CF7-->
<!--End VDZ Yandex Metrika Plugin-->

</head>

<body class="post-template-default single single-post postid-7897 single-format-standard right-sidebar  lazy-normal has-lb">


<div class="main-wrap">

	
		
		
<header id="main-head" class="main-head head-nav-below has-search-modal simple simple-boxed">

	<div class="inner inner-head" data-sticky-bar="0">

		<div class="wrap cf wrap-head">

			<div class="left-contain">
				<span class="mobile-nav"><i class="fa fa-bars"></i></span>

					<div class="title">
		
		<a href="https://otus.ru/journal/" title="OTUS JOURNAL" rel="home" data-wpel-link="internal">
		
					
						<span class="text-logo"><img src="/journal/wp-content/themes/contentberg/img/logo_site.svg" alt="OTUS JOURNAL"></span>
			
				
		</a>
	
	</div>
			</div>


			<div class="navigation-wrap inline">
				
					<nav class="navigation inline simple light" data-sticky-bar="0">
						<div class="menu-rubriki-container"><ul id="menu-rubriki" class="menu"><li id="menu-item-109" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-cat-1 menu-item-109"><a href="https://otus.ru/journal/category/pro-it/" data-wpel-link="internal"><span>Про IT</span></a></li>
<li id="menu-item-113" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-cat-4 menu-item-113"><a href="https://otus.ru/journal/category/polza/" data-wpel-link="internal"><span>Полезное</span></a></li>
<li id="menu-item-114" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-cat-3 menu-item-114"><a href="https://otus.ru/journal/category/lifestyle/" data-wpel-link="internal"><span>Лайфстайл</span></a></li>
<li id="menu-item-10406" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10406"><a href="https://otus.ru/catalog/courses" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right"><span>Обучение</span><span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10407" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10407"><a href="https://otus.ru/about" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right"><span>Информация</span><span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
</ul></div>					</nav>

							</div>

			<div class="actions">
				<div class="otus-login-site">
					<a href="https://otus.ru/login/" target="_blank" data-wpel-link="external" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Войти<span class="wpel-icon wpel-image wpel-icon-6"></span></a>
				</div>

				
				
				
					<a href="#" title="Search" class="search-link"><i class="fa fa-search"></i></a>

				
				
			</div>

		</div>
	</div>

</header> <!-- .main-head -->

<div class="nav nav_disable nav_colored nav_transparent course-categories__nav nav__scroll ">
	<div class="container wrap">
		
			<div class="links inline simple light scrollable-menu">
				<div class="menu-menju-navykov-container"><ul id="menu-menju-navykov" class="menu"><li id="menu-item-10413" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10413"><a href="https://otus.ru/categories/programming/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Программирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10414" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10414"><a href="https://otus.ru/categories/architecture/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Архитектура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10415" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10415"><a href="https://otus.ru/categories/operations/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Инфраструктура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10416" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10416"><a href="https://otus.ru/categories/information-security-courses/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Безопасность<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10417" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10417"><a href="https://otus.ru/categories/data-science/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Data Science<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10418" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10418"><a href="https://otus.ru/categories/gamedev/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">GameDev<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10419" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10419"><a href="https://otus.ru/categories/marketing-business/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Управление<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10420" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10420"><a href="https://otus.ru/categories/analytics/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Аналитика и анализ<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10421" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10421"><a href="https://otus.ru/categories/testing/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Тестирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
</ul></div>			</div>

			</div>
</div>

	
		
	
<div class="main wrap">

	<div class="ts-row cf">
		<div class="col-8 main-content cf">
		
			
				
<article id="post-7897" class="the-post post-7897 post type-post status-publish format-standard has-post-thumbnail category-polza tag-css tag-frontend-2 tag-html tag-programmirovanie tag-frontend">
	
	<header class="post-header the-post-header cf">
			
			<div class="post-meta the-post-meta">
		
				
			<span class="post-cat">	
									
		<a href="https://otus.ru/journal/category/polza/" class="category" data-wpel-link="internal">Полезное</a>

					</span>
			
				
		
		<h1 class="post-title">
			Чекбоксы и их стилизация			
		</h1>
		
			
					<a href="https://otus.ru/journal/chekboksy-i-ih-stilizaciya/" class="date-link" data-wpel-link="internal"><time class="post-date">7 ноября, 2023</time></a>
				
	</div>

			
	<div class="featured">
	
				
					
			<a href="https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x7209-1.jpg" class="image-link" data-wpel-link="internal"><img width="770" height="515" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20770%20515%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="attachment-contentberg-main size-contentberg-main lazyload wp-post-image" alt="Чекбоксы и их стилизация" title="Чекбоксы и их стилизация" decoding="async" fetchpriority="high" data-srcset="https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x7209-1-770x515.jpg 770w, https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x7209-1-270x180.jpg 270w" data-src="https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x7209-1-770x515.jpg" data-sizes="(max-width: 770px) 100vw, 770px" />			</a>
			
				
	</div>
		
	</header><!-- .post-header -->

				
		
		<div class="post-content description cf entry-content content-normal">


			<div id="ez-toc-container" class="ez-toc-v2_0_61 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction">
<div class="ez-toc-title-container">
<p class="ez-toc-title " >Содержание</p>
<span class="ez-toc-title-toggle"><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="Toggle Table of Content"><span class="ez-toc-js-icon-con"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #999;color:#999" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #999;color:#999" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></span></a></span></div>
<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-1" href="#%D0%9E%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5" title="Определение">Определение</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-2" href="#%D0%A1%D0%BC%D1%8B%D1%81%D0%BB_%D0%B8_%D0%BF%D1%80%D0%B5%D0%B4%D0%BD%D0%B0%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D0%B5" title="Смысл и предназначение">Смысл и предназначение</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-3" href="#%D0%A1%D0%BC%D0%B5%D0%B6%D0%BD%D1%8B%D0%B5_%D0%BF%D0%BE%D0%BD%D1%8F%D1%82%D0%B8%D1%8F" title="Смежные понятия">Смежные понятия</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-4" href="#%D0%9A%D0%BB%D0%B0%D1%81%D1%81%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%87%D0%B5%D0%BA%D0%B1%D0%BE%D0%BA%D1%81" title="Классический чекбокс">Классический чекбокс</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-5" href="#%D0%9F%D0%BE%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BD%D0%BE%D1%80%D0%BC%D0%B0%D0%BB%D0%B8%D0%B7%D0%B0%D1%82%D0%BE%D1%80%D0%B0" title="Подключение нормализатора">Подключение нормализатора</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-6" href="#%D0%98%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2%D0%BD%D0%B5%D1%88%D0%BD%D0%B5%D0%B3%D0%BE_%D0%B2%D0%B8%D0%B4%D0%B0" title="Изменение внешнего вида">Изменение внешнего вида</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-7" href="#%D0%9F%D1%80%D0%BE%D1%87%D0%B8%D0%B5_%D1%87%D0%B5%D0%BA%D0%B1%D0%BE%D0%BA%D1%81%D1%8B_%D0%B8_%D0%B8%D1%85_%D0%BE%D0%B1%D1%8A%D0%B5%D0%B4%D0%B8%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5" title="Прочие чекбоксы и их объединение">Прочие чекбоксы и их объединение</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-8" href="#%D0%9F%D0%BE%D0%B4%D1%81%D1%87%D0%B5%D1%82_%D0%B8_%D0%B2%D1%8B%D0%B2%D0%BE%D0%B4" title="Подсчет и вывод">Подсчет и вывод</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-9" href="#%D0%9B%D1%83%D1%87%D1%88%D0%B8%D0%B5_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9" title="Лучшие примеры стилей">Лучшие примеры стилей</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-10" href="#%D0%A4%D0%BB%D0%B0%D0%B3_%D1%81_%D0%B3%D1%80%D0%B0%D0%B4%D0%B8%D0%B5%D0%BD%D1%82%D0%BE%D0%BC" title="Флаг с градиентом">Флаг с градиентом</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-11" href="#%D0%A2%D0%B5%D0%BC%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD" title="Тематический дизайн">Тематический дизайн</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-12" href="#%D0%A0%D0%B0%D0%B7%D0%BD%D1%8B%D0%B5_%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8_CSS" title="Разные анимации CSS">Разные анимации CSS</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-13" href="#%D0%9A%D0%BE%D0%BB%D0%BB%D0%B5%D0%BA%D1%86%D0%B8%D0%B8_%D1%84%D0%BB%D0%B0%D0%B6%D0%BA%D0%BE%D0%B2" title="Коллекции флажков">Коллекции флажков</a></li></ul></li></ul></nav></div>

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



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



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



<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9E%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5"></span>Определение<span class="ez-toc-section-end"></span></h2>



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



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



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



<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A1%D0%BC%D1%8B%D1%81%D0%BB_%D0%B8_%D0%BF%D1%80%D0%B5%D0%B4%D0%BD%D0%B0%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D0%B5"></span>Смысл и предназначение<span class="ez-toc-section-end"></span></h2>



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



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



<ul>
<li>поле, которое поддерживает два варианта состояния;</li>



<li>ярлык (название).</li>
</ul>



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



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



<ol>
<li>В выпадающих списках. В данном случае люди легко и быстро смогут отмечать предпочтения на веб-порталах, сайтах услуг, интернет-магазинах. Также пользователям удастся оформлять заказы, чистить корзины, выбирать дополнительные опции и так далее.</li>



<li>В онлайн-анкетах. Некоторые бланки опросов дают возможность выбора нескольких вариантов из предложенного списка. Это отличный вариант для того, чтобы не прописывать различные утверждения вручную.</li>



<li>Перед кнопкой отправки данных в пользовательских формах. Обычно такой чекбокс будет выступать подтверждением того, что клиент прочитал и принял пункт/соглашение.</li>



<li>В электронной почте. Здесь предлагается выборка нескольких писем для дальнейшего взаимодействия. Пример – можно отметить все сообщения прочитанными/непрочитанными, переместить отмеченные письма в папку или удалить.</li>



<li>В капчах. Captcha – способ защиты от спама и роботов на веб-сайтах и в приложениях. Современные каптчи часто представлены полями, в которых нужно поставить галочки, иногда решая простые задачи. Пример – отыскать картинки на заданную тематику.</li>
</ol>



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



<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A1%D0%BC%D0%B5%D0%B6%D0%BD%D1%8B%D0%B5_%D0%BF%D0%BE%D0%BD%D1%8F%D1%82%D0%B8%D1%8F"></span>Смежные понятия<span class="ez-toc-section-end"></span></h2>



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



<ol>
<li>Переключатель – компонент пользовательского интерфейса, который дает возможность переключения между двумя состояниями объекта/функции. Обычно: включено и выключено. Представляет собой небольшую кнопку, которую двигают вправо-влево. Это помогает менять состояния. Левое положение – «выключено», правое – «включено».</li>



<li>Радиокнопка – элемент, позволяющий пользователям выбирать один вариант из набора взаимоисключающих компонентов. Обычно представлена небольшим кругом, который выбирается (заполняется) или остается неактивным (пустым). Часто встречается в формах для указания только одного варианта из предложенного списка. Все остальные записи перечня автоматически становятся невыбранными.</li>



<li>Выпадающий список – компонент, который дает возможность выбора одного или нескольких вариантов из множества. Это небольшая стрелка, нажатие на которую влечет за собой разворачивание некоторого перечня. Выпадающие списки используются везде, где требуется компактно уместить в один элемент множество однородных вариантов. Внутри могут располагаться чекбоксы и радиокнопки.</li>
</ol>



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



<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9A%D0%BB%D0%B0%D1%81%D1%81%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%87%D0%B5%D0%BA%D0%B1%D0%BE%D0%BA%D1%81"></span>Классический чекбокс<span class="ez-toc-section-end"></span></h2>



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



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



<ol>
<li>Помещение input-компонента в label:<img alt="Чекбоксы и их стилизация" decoding="async" src="https://lh7-us.googleusercontent.com/PiMP1P2nCz7isvG_nzi_zaClHcaBzP0swczks7zUWDMHeyAQZQq975ZSdvHVVOw-txjauZgSl2ARkDAbdehK4QaxteDAVXG0PfnLmCwtXoSwTKaZpkcoAE7iXXIx4o0-rh5E3X5o-M8_BePnjiERCA" width="495" height="84">.</li>



<li>Заданием input атрибута id, а label – for с аналогичным значением как у id: <img alt="Чекбоксы и их стилизация" decoding="async" src="https://lh7-us.googleusercontent.com/gCvOl660t29wZyYeF_lKVlY9CgzNhr4HGhNtJ5eitHKCuUOMAM1VByzQTyTuQSx370RKw3O4aUe1PPQkAGgYQupUu8Pf0X7ipMiQtDH57TEy9k07ubapuTeYnMXqV5VSINSuIca98MNsyfJSwTE5Yw" width="501" height="69">.</li>
</ol>



<p>Далее предстоит научиться создавать классические чекбоксы, а также добавлять к ним различные стили CSS. А еще – рассмотреть самые интересные и функциональные варианты оформления the checkbox с HTML-кодами.</p>



<p>Основной пример будет рассмотрен на базе списка ингредиентов для пиццы. К стандартной форме предстоит прикрепить стили, которые увеличат надписи и анимируют их. По умолчанию the checkbox – это маленькие и кликабельные элементы.</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/da9-ux3BLO1KyMPLT0XiBFPNKgU-EMbWZJIyPZIfXAA9HLFmSBsl3YXsWFRqopVY8DfJu8N0F-C3eHQKAuCVQLTtkz-0QBqgYNVNrnO851GGvqzL3tyqvssA0F-nIsjhIzg_kxK4qVUzgOC-Wd1mVA" alt="Чекбоксы и их стилизация"/></figure>



<p>Выше – пример простейшего чекбокса с вопросом и небольшим списком. Именно к нему будут добавляться стили и функциональность.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BD%D0%BE%D1%80%D0%BC%D0%B0%D0%BB%D0%B8%D0%B7%D0%B0%D1%82%D0%BE%D1%80%D0%B0"></span>Подключение нормализатора<span class="ez-toc-section-end"></span></h3>



<p>Чтобы the HTML checkbox style работал одинаково во всех браузерах, требуется подключить нормализатор CSS. Он представляет собой специальный набор стилей, который приводит содержимое страницы к единому виду в браузере.</p>



<p>Для подключения используется следующий код:</p>



<p>&lt;link rel=&#187;stylesheet&#187;</p>



<p>href=&#187;https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css&#187;&gt;</p>



<p>Сразу можно подключить файл со стилями. На данный момент он будет пустым:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/hD3DaJ4DEnZivDjKNwgbwlNdIypxZ3aVzTdrJfr9_eO2P9_Rrr-SVU3vdwTcbG9gf5czWhQCAcEu4uMi6QDaypla65VjVFNwblamWkNOfF3YTgXg8COyUxVJ3B8flR4btMhlfpxqqil6kEEhTyBciQ" alt="Чекбоксы и их стилизация"/></figure>



<p>Теперь предстоит внедрить the checkbox custom style css. Делаться это будет поэтапно.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%98%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2%D0%BD%D0%B5%D1%88%D0%BD%D0%B5%D0%B3%D0%BE_%D0%B2%D0%B8%D0%B4%D0%B0"></span>Изменение внешнего вида<span class="ez-toc-section-end"></span></h3>



<p>Чтобы обеспечить анимационные эффекты у галочек, можно отрисовать элементы вручную через SVG-графику и использовать получившиеся компоненты для анимации. Для этого потребуется учитывать и проделывать следующие действия:</p>



<ol>
<li>Воспользоваться тегом label для подписи чекбокса. На этом этапе пишется id компонента, который подписывается. Им станет весь the checkbox.</li>



<li>Внутри соответствующего тега размещается input. Он отвечает за создание the checkbox.</li>



<li>Для чекбокса указывается стиль. Это необходимо для его дальнейшей настройки. Также указывается id, чтобы подпись поняла, к чему именно она имеет отношение.</li>



<li>Добавить ниже SVG-пространство. В нем отрисовываются галочки и рамки.</li>



<li>Рамка отображается сразу. Видимость галочки управляется за счет стилей.</li>



<li>Подпись the checkbox добавляется в теге span.</li>
</ol>



<p>The checkbox HTML CSS стиль добавлен, но размеры теперь «сломались». Такой результат вышел из-за того, что для галочки и чекбокса отсутствуют стили. Они формируются в документе style.css.</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/V9hUS7a8x9IcBIoksXxkreoecxgSGf3TYEtDcvpGbj1xxTheNrqyXGJs1A8x06QuuSSXmaBHctBHmW-xvvD1Pm88eQhYD0-w_GWg1O3Z_woVDZPGjp9yTFyo8dBootCXuUQM_49bJiZKs0Hknmzgbg" alt="Чекбоксы и их стилизация"/></figure>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/qJHUT7G8qr04wrk_ILpwjs3QHYPmI_ateJKE6NM0JbCTgN4MeZb6RgZHYdsIcnlO3KCjqwnQ2V6t3_wvUL0SEQOQ8QffsdDMRjAnnV9UMzjOJKSI5wqaRIPsfY4gFrbaDRNd3KUbClcf4fQfEzWjhg" alt="Чекбоксы и их стилизация"/></figure>



<p>Чекбокс появился, но отметку-галочку в нем пока поставить не получается. Необходимо настроить input type checkbox-label для соответствующей операции:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/LIBefeqGayO_xOaDPrzhMTuyNdPbxTuDftyqBs0eDEFCGp9r3fF63uj9ARc8vWoJJP1XFUGKt3qyVsZ_1Ey_OJv_rsIJCHOd-5i2Ktn1XrkFGqKXw1--LjG0rUXKjd5PyLKL-ZISJBHWRa2sN_15gg" alt="Чекбоксы и их стилизация"/></figure>



<p>Эта запись указывает на то, что стиль применяется к компонентам класса .checkbox__icon.trick. Они идут в HTML-коде сразу после отмеченного элемента the checkbox input. Если между элементами с этими классами вставить другой тег, ничего работать не будет. Подобный прием позволяет управлять поведением компонентов на экране.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9F%D1%80%D0%BE%D1%87%D0%B8%D0%B5_%D1%87%D0%B5%D0%BA%D0%B1%D0%BE%D0%BA%D1%81%D1%8B_%D0%B8_%D0%B8%D1%85_%D0%BE%D0%B1%D1%8A%D0%B5%D0%B4%D0%B8%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5"></span>Прочие чекбоксы и их объединение<span class="ez-toc-section-end"></span></h3>



<p>Чтобы на экране отобразился the checkbox CSS с анимированными галочками, необходимо вернуться в HTML-код и добавить остальные ингредиенты для пиццы. Для этого используются операции копирования и вставки. Достаточно лишь поменять id-числа у чекбоксов:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/SIm0F9mq70dKUC4T-OD_7bD2VAvG9U--GC6NYEJk3-CBB8J6qhcsRc0CBjNCsWm5kfBGiO9sbDWOENXnqSJgXCxWi6X5AEJ1CtCOLX9KiJsjNTViJ8FKZmTUB9Ep2K6-n2ao7WaSLN5Qj4Mxkhf88Q" alt="Чекбоксы и их стилизация"/></figure>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/R-3i-Mep6lEqSJvzqncm_E_hkTguQHHYRqNp1sR3AtNRQUBsGAF3TLn5H_NDgBfcqt2OGRwHZwwTrwG1TJZQJCXLmXE8uCwf2uqPAj7InB89zi_lggdWFXu5segeQuh-me_y13Oe4Ff2lV-ZTuBLlw" alt="Чекбоксы и их стилизация"/></figure>



<p>Полученные чекбоксы стоят в ряд. Их лучше объединить так, чтобы варианты ингредиентов были написаны друг под другом. А еще рекомендуется добавить автоподсчет отмеченных пунктов.</p>



<p>Для объединения the checkbox-label в HTML-документе рекомендуется использовать тег div. Можно сформировать отдельный класс для оформления чекбоксов:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/5RFwesw2tPgDRMK4U4gALGp_Yvx8vWiZ0Rjmr16BLq-_P4Tn1IifcsF5UWqqlufeywy-7N1Sp8d8czNKFsZ3p9GlemzuZ8zuxNgNXeJ_isX9X2a456ShhxzDLrcuq_xTgNk_XBvfczx-Ms-6mYEG-g" alt="Чекбоксы и их стилизация"/></figure>



<p>В файле CSS checkbox прописывается код:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/c1NPfKWdkRviFZFyil9glcqFFJwBoRKjxIdHBsSmyJ4RgZ3L5B1vPXytGA83x8dcmPSWqsy1SuIjrcNB0HrRq9vaAczXo_0QAb6P90-U93Np-OdzTavtf_hVfT9mH9ssKXcpBCMlrKNwFpdtjLyXag" alt="Чекбоксы и их стилизация"/></figure>



<p>Основные действия происходят в строке .check-group &gt; * + *. Она означает следующее:</p>



<ol>
<li>Символ «больше» указывает на то, что правило будет относиться к компонентам, лежащим внутри тега с классом .check-group.</li>



<li>Звездочка указывает на то, что правило относится ко всем компонентам класса.</li>



<li>Плюс ссылается на применение предыдущего правила только тогда, когда предыдущий (любой вложенный) и следующий (тоже вложенный) компоненты идут друг за другом.</li>



<li>Вторая звездочка также указывает на то, что следующий элемент может быть любым.</li>
</ol>



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



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%B4%D1%81%D1%87%D0%B5%D1%82_%D0%B8_%D0%B2%D1%8B%D0%B2%D0%BE%D0%B4"></span>Подсчет и вывод<span class="ez-toc-section-end"></span></h3>



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



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/99yuTJTNWMo1Ew7XhZUFyj4vy625-glGXPN0lU3MzmuCXU09IzBzt4zsJJPJy5yhrt8f9_WTaK8AbYCQaHynlqSLiXZ3UQKzsqsPyJ_f1vOH8nnM5hEC0TVYt3l7XD6QNXoPLPkVioJVcMp5N9NRVQ" alt="Чекбоксы и их стилизация"/></figure>



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



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/zk7J_cHSfdQjNue6YDwRToSjkeRzITr5QdhjYT2X0NIHDhCPSWp7PCQk4nEFgUlVxQvp6i3t5nrmLavhaeVUcSL0iqZ-QeNwMKYsDSWfzgIaAQg1rojEllX5wMfzHhT4cyYfGn1N2lcvi1dyoG8Xcw" alt="Чекбоксы и их стилизация"/></figure>



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



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/CES3d3Vo2v1Le7OsluEFFPFXaRxZEXPJQEtfwmmG-ww34A1MUt0CGAlsAZz0cLACZ4FY8mhkFZxDafNyGGTUxgaWu8yi0ZAeS5cVe_OasYwVvMAoIOCGC4if75afSeucIx6mOyVFZgxQ3Ghqui9Qmw" alt="Чекбоксы и их стилизация"/></figure>



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



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/AZ4c46wM52uwiomVmYQ7JSk-WlOZb-rgn1HH_p_a4NTmpgVEKS17McBENB1rG396Gy9s6sDiTBONKZhBqW6F3Zq2moPOchYsINhJ1APh804FzeEkqbBMqqIY-JtQgaaDFVNJPTWHUA379UhcGxbkkQ" alt="Чекбоксы и их стилизация"/></figure>



<p><a href="https://mihailmaximov.ru/projects/checkbox/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Здесь<span class="wpel-icon wpel-image wpel-icon-6"></span></a> можно увидеть получившийся результат.</p>



<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9B%D1%83%D1%87%D1%88%D0%B8%D0%B5_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9"></span>Лучшие примеры стилей<span class="ez-toc-section-end"></span></h2>



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



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A4%D0%BB%D0%B0%D0%B3_%D1%81_%D0%B3%D1%80%D0%B0%D0%B4%D0%B8%D0%B5%D0%BD%D1%82%D0%BE%D0%BC"></span>Флаг с градиентом<span class="ez-toc-section-end"></span></h3>



<p>Градиент – отличный способ выделения определенных компонентов или фонов. <a href="https://codepen.io/alvarotrigo/pen/ZErExdK" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Здесь<span class="wpel-icon wpel-image wpel-icon-6"></span></a> в качестве него используется фон флажка:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/2dAzRLY4Oy6Q7OvHXg0roXoRseQ_f78Yc4gGnHI53b2lFj2fNlZjVj3HutywFyqodzmEpIgasRdYMVVdwvvJY70puqBE9Tz7LDbGLmTs1yD-3WRe2rAJIhqT04tyjd509C77Lg6WjJr1aW0yEiVWfQ" alt="Чекбоксы и их стилизация"/></figure>



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



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A2%D0%B5%D0%BC%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD"></span>Тематический дизайн<span class="ez-toc-section-end"></span></h3>



<p>Плоский тематический дизайн и анимированная кнопка-переключатель хорошо впишется в веб-сайт, выполненный в неоморфизме. Анимация <a href="https://codepen.io/alvarotrigo/pen/zYRYWgP" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">здесь<span class="wpel-icon wpel-image wpel-icon-6"></span></a> легкая и современная:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/827NPvSGqDBMeLC-rBVm2Jy1-rVwTqgq5KEBIJVUu6_rchjSlUcthNbqkQQjxPaz2BybzcWmE_QKFQ5HtVXAk_jyMizabMmiamtaUSARvZK8XJhIM1i3HPD7LIFoyLVoo0AruRHwPJr5ki9kMSFSFA" alt="Чекбоксы и их стилизация"/></figure>



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



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A0%D0%B0%D0%B7%D0%BD%D1%8B%D0%B5_%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8_CSS"></span>Разные анимации CSS<span class="ez-toc-section-end"></span></h3>



<p>А <a href="https://codepen.io/alvarotrigo/pen/Yzezamd" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">вот<span class="wpel-icon wpel-image wpel-icon-6"></span></a> стилизация checkbox, которая может называться полноценной коллекцией. Она позволяет настроить три способа выделения из списка желаемого пункта.</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/2mKSY_xJP3kw63GerNg1srlp1hQ8jkTJbGsJ1342w6g3nxT-jF8D3PRKdle9pHWNoMPFAEZuZ39AdlGJh1ShsZl16xq2RRRCEDI2NeZ8s6lkn94SLtNHHFVVG0SfoxzS5gpuVSsnsXh89B84Z6dRyw" alt="Чекбоксы и их стилизация"/></figure>



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



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9A%D0%BE%D0%BB%D0%BB%D0%B5%D0%BA%D1%86%D0%B8%D0%B8_%D1%84%D0%BB%D0%B0%D0%B6%D0%BA%D0%BE%D0%B2"></span>Коллекции флажков<span class="ez-toc-section-end"></span></h3>



<p>А <a href="https://codepen.io/alvarotrigo/pen/YzezaMR" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">вот<span class="wpel-icon wpel-image wpel-icon-6"></span></a> the CSS-checkbox, который позволяет задать несколько стилей для самих флажков:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/757nGV-KXj2QVd880Y_Z6xyiPy6cl2Xrw1nfVEHJSE_F66Y0mjxJm1OoBvL8WB6x72NsSZk0mby_8DwP39amPU1AvDQMRXy7Xt5HP5J2_kipSUtSCgtYA2KqpSORpALzl2UuhE4OehK5XQdWpn0iuA" alt="Чекбоксы и их стилизация"/></figure>



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



<p><em>Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в <a href="https://otus.ru/?utm_source=oj" target="_blank" rel="noreferrer noopener nofollow external" data-wpel-link="external" class="wpel-icon-right">Otus<span class="wpel-icon wpel-image wpel-icon-6"></span></a>. В частности, вас может заинтересовать курс, посвященный FullStack-разработке, первой ступенью которого является <a href="https://otus.ru/lessons/specializacija-fullstack-dev/?utm_source=oj&amp;utm_medium=affilate&amp;utm_campaign=spec_js" target="_blank" rel="noreferrer noopener nofollow external" data-wpel-link="external" class="wpel-icon-right">изучение HTML/CSS<span class="wpel-icon wpel-image wpel-icon-6"></span></a></em>.</p>
				
		</div><!-- .post-content -->
		
		<div class="the-post-foot cf">
		
						
			<div class="tag-share cf">
				
									<div class="post-tags"><a href="https://otus.ru/journal/tag/css/" rel="tag" data-wpel-link="internal">CSS</a><a href="https://otus.ru/journal/tag/frontend-2/" rel="tag" data-wpel-link="internal">frontend</a><a href="https://otus.ru/journal/tag/html/" rel="tag" data-wpel-link="internal">HTML</a><a href="https://otus.ru/journal/tag/programmirovanie/" rel="tag" data-wpel-link="internal">программирование</a><a href="https://otus.ru/journal/tag/frontend/" rel="tag" data-wpel-link="internal">фронтенд</a></div>				
											<div class="post-share">
					
						
			<div class="post-share-icons cf">
			
				<span class="counters">

										
				</span>

								
					<a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fotus.ru%2Fjournal%2Fchekboksy-i-ih-stilizaciya%2F" class="link facebook wpel-icon-right" target="_blank" title="Share on Facebook" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-facebook"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
						
								
					<a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fchekboksy-i-ih-stilizaciya%2F&#038;text=%D0%A7%D0%B5%D0%BA%D0%B1%D0%BE%D0%BA%D1%81%D1%8B%20%D0%B8%20%D0%B8%D1%85%20%D1%81%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F" class="link twitter wpel-icon-right" target="_blank" title="Share on Twitter" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-twitter"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
						
								
					<a href="https://www.linkedin.com/shareArticle?mini=true&#038;url=https%3A%2F%2Fotus.ru%2Fjournal%2Fchekboksy-i-ih-stilizaciya%2F" class="link linkedin wpel-icon-right" target="_blank" title="LinkedIn" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-linkedin"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
						
								
					<a href="https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fchekboksy-i-ih-stilizaciya%2F&#038;media=https%3A%2F%2Fotus.ru%2Fjournal%2Fwp-content%2Fuploads%2F2023%2F11%2Foj-1080x7209-1.jpg&#038;description=%D0%A7%D0%B5%D0%BA%D0%B1%D0%BE%D0%BA%D1%81%D1%8B%20%D0%B8%20%D0%B8%D1%85%20%D1%81%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F" class="link pinterest wpel-icon-right" target="_blank" title="Pinterest" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-pinterest-p"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
						
									
								
			</div>
			
						
		</div>									
			</div>

			
		</div>
		
				
		
		
<div class="post-nav">


	<div class="post previous cf">
		<a href="https://otus.ru/journal/chat-bot-na-pitone/" title="Prev Post" class="nav-icon" data-wpel-link="internal">
			<i class="fa fa-angle-left"></i>
		</a>
		
		<span class="content">
			
			<a href="https://otus.ru/journal/chat-bot-na-pitone/" class="image-link" rel="previous" data-wpel-link="internal">
				<img width="150" height="106" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20150%20106%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="attachment-thumbnail size-thumbnail lazyload wp-post-image" alt="Чат-бот на Питоне" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x7208-1-150x106.jpg 150w, https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x7208-1-300x212.jpg 300w, https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x7208-1-1024x724.jpg 1024w, https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x7208-1-768x543.jpg 768w, https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x7208-1-1536x1086.jpg 1536w" data-src="https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x7208-1-150x106.jpg" data-sizes="(max-width: 150px) 100vw, 150px" title="Чат-бот на Питоне" />			</a>
			
			<div class="post-meta">
				<span class="label">Prev Post</span>
			
					<div class="post-meta post-meta-b">
		
			
		
					
			
			<h2 class="post-title">
							
					<a href="https://otus.ru/journal/chat-bot-na-pitone/" data-wpel-link="internal">Чат-бот на Питоне</a>
					
							</h2>
			
				
		<div class="below">
		
							<a href="https://otus.ru/journal/chat-bot-na-pitone/" class="meta-item date-link" data-wpel-link="internal"><time class="post-date" datetime="2023-11-07T20:48:27+00:00">7 ноября, 2023</time></a>

				<span class="meta-sep"></span>
						
			
							<span class="meta-item read-time">7 Mins Read</span>
					
		</div>
		
	</div>			</div>
		</span>
	</div>
		
	


	<div class="post next cf">
		<a href="https://otus.ru/journal/kak-sdelat-obratnuju-svyaz-na-html/" title="Next Post" class="nav-icon" data-wpel-link="internal">
			<i class="fa fa-angle-right"></i>
		</a>
		
		<span class="content">
			
			<a href="https://otus.ru/journal/kak-sdelat-obratnuju-svyaz-na-html/" class="image-link" rel="next" data-wpel-link="internal">
				<img width="150" height="106" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20150%20106%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="attachment-thumbnail size-thumbnail lazyload wp-post-image" alt="Как сделать обратную связь на HTML" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x72011-1-150x106.jpg 150w, https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x72011-1-300x212.jpg 300w, https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x72011-1-1024x724.jpg 1024w, https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x72011-1-768x543.jpg 768w, https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x72011-1-1536x1086.jpg 1536w" data-src="https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x72011-1-150x106.jpg" data-sizes="(max-width: 150px) 100vw, 150px" title="Как сделать обратную связь на HTML" />			</a>
			
			<div class="post-meta">
				<span class="label">Next Post</span>
				
					<div class="post-meta post-meta-b">
		
			
		
					
			
			<h2 class="post-title">
							
					<a href="https://otus.ru/journal/kak-sdelat-obratnuju-svyaz-na-html/" data-wpel-link="internal">Как сделать обратную связь на HTML</a>
					
							</h2>
			
				
		<div class="below">
		
							<a href="https://otus.ru/journal/kak-sdelat-obratnuju-svyaz-na-html/" class="meta-item date-link" data-wpel-link="internal"><time class="post-date" datetime="2023-11-07T22:10:21+00:00">7 ноября, 2023</time></a>

				<span class="meta-sep"></span>
						
			
							<span class="meta-item read-time">7 Mins Read</span>
					
		</div>
		
	</div>			</div>
		</span>
	</div>
		
	
</div>		
		

<section class="related-posts grid-3">

	<h4 class="section-head"><span class="title">Читать ещё</span></h4> 
	
	<div class="ts-row posts cf">
	
			<article class="post col-4">
					
			<a href="https://otus.ru/journal/uroven-gotovnosti-cto-k-2026/" title="Уровень готовности CTO к 2026" class="image-link" data-wpel-link="internal">
				<img width="270" height="180" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20270%20180%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="image lazyload wp-post-image" alt="Уровень готовности CTO к 2026" title="Уровень готовности CTO к 2026" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-270x180.jpg 270w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-770x515.jpg 770w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-370x245.jpg 370w" data-src="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-270x180.jpg" data-sizes="(max-width: 270px) 100vw, 270px" />			</a>
			
			<div class="content">
				
				<h3 class="post-title"><a href="https://otus.ru/journal/uroven-gotovnosti-cto-k-2026/" class="post-link" data-wpel-link="internal">Уровень готовности CTO к 2026</a></h3>

				<div class="post-meta">
					<time class="post-date" datetime="2025-11-16T19:50:59+00:00">16 ноября, 2025</time>
				</div>
			
			</div>

		</article >
		
			<article class="post col-4">
					
			<a href="https://otus.ru/journal/novye-uroki-noyabrya-tolko-top-temy-po-programmirovaniju/" title="Новые уроки ноября: только топ-темы по программированию" class="image-link" data-wpel-link="internal">
				<img width="270" height="180" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20270%20180%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="image lazyload wp-post-image" alt="Новые уроки ноября: только топ-темы по программированию" title="Новые уроки ноября: только топ-темы по программированию" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-270x180.jpg 270w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-770x515.jpg 770w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-370x245.jpg 370w" data-src="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-270x180.jpg" data-sizes="(max-width: 270px) 100vw, 270px" />			</a>
			
			<div class="content">
				
				<h3 class="post-title"><a href="https://otus.ru/journal/novye-uroki-noyabrya-tolko-top-temy-po-programmirovaniju/" class="post-link" data-wpel-link="internal">Новые уроки ноября: только топ-темы по программированию</a></h3>

				<div class="post-meta">
					<time class="post-date" datetime="2025-11-09T23:24:11+00:00">9 ноября, 2025</time>
				</div>
			
			</div>

		</article >
		
			<article class="post col-4">
					
			<a href="https://otus.ru/journal/schjot-idjot-na-chasy/" title="Счёт идёт на часы" class="image-link" data-wpel-link="internal">
				<img width="270" height="180" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20270%20180%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="image lazyload wp-post-image" alt="Счёт идёт на часы" title="Счёт идёт на часы" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-270x180.png 270w, https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-770x515.png 770w, https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-370x245.png 370w" data-src="https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-270x180.png" data-sizes="(max-width: 270px) 100vw, 270px" />			</a>
			
			<div class="content">
				
				<h3 class="post-title"><a href="https://otus.ru/journal/schjot-idjot-na-chasy/" class="post-link" data-wpel-link="internal">Счёт идёт на часы</a></h3>

				<div class="post-meta">
					<time class="post-date" datetime="2025-10-30T15:04:59+00:00">30 октября, 2025</time>
				</div>
			
			</div>

		</article >
		
		
	</div>
	
</section>

		
				
</article> <!-- .the-post -->	
			
		</div>
		
		<aside class="col-4 sidebar">

	<div class="inner">

					<ul>
				<li id="search-2" class="widget widget_search"><h5 class="widget-title"><span>Поиск по блогу</span></h5>
	
	<form method="get" class="search-form" action="https://otus.ru/journal/">
		<label>
			<span class="screen-reader-text">Search for:</span>
			<input type="search" class="search-field" placeholder="Введите запрос и нажмите Enter" value="" name="s" title="Search for:" />
		</label>
		<button type="submit" class="search-submit"><i class="fa fa-search"></i></button>
	</form>

</li>
<li id="tag_cloud-5" class="widget widget_tag_cloud"><h5 class="widget-title"><span>Метки</span></h5><div class="tagcloud"><a href="https://otus.ru/journal/tag/android-2/" class="tag-cloud-link tag-link-74 tag-link-position-1" style="font-size: 12.472222222222pt;" aria-label="Android (34 элемента)" data-wpel-link="internal">Android</a>
<a href="https://otus.ru/journal/tag/c-3/" class="tag-cloud-link tag-link-91 tag-link-position-2" style="font-size: 10.916666666667pt;" aria-label="C (23 элемента)" data-wpel-link="internal">C</a>
<a href="https://otus.ru/journal/tag/c-2/" class="tag-cloud-link tag-link-81 tag-link-position-3" style="font-size: 12.666666666667pt;" aria-label="C# (35 элементов)" data-wpel-link="internal">C#</a>
<a href="https://otus.ru/journal/tag/c/" class="tag-cloud-link tag-link-20 tag-link-position-4" style="font-size: 12.472222222222pt;" aria-label="c++ (34 элемента)" data-wpel-link="internal">c++</a>
<a href="https://otus.ru/journal/tag/computer-science/" class="tag-cloud-link tag-link-209 tag-link-position-5" style="font-size: 15.972222222222pt;" aria-label="computer science (78 элементов)" data-wpel-link="internal">computer science</a>
<a href="https://otus.ru/journal/tag/css/" class="tag-cloud-link tag-link-288 tag-link-position-6" style="font-size: 8.6805555555556pt;" aria-label="CSS (13 элементов)" data-wpel-link="internal">CSS</a>
<a href="https://otus.ru/journal/tag/data-science/" class="tag-cloud-link tag-link-151 tag-link-position-7" style="font-size: 8pt;" aria-label="Data Science (11 элементов)" data-wpel-link="internal">Data Science</a>
<a href="https://otus.ru/journal/tag/devops/" class="tag-cloud-link tag-link-98 tag-link-position-8" style="font-size: 10.138888888889pt;" aria-label="devops (19 элементов)" data-wpel-link="internal">devops</a>
<a href="https://otus.ru/journal/tag/docker/" class="tag-cloud-link tag-link-143 tag-link-position-9" style="font-size: 8.2916666666667pt;" aria-label="Docker (12 элементов)" data-wpel-link="internal">Docker</a>
<a href="https://otus.ru/journal/tag/gamedev/" class="tag-cloud-link tag-link-25 tag-link-position-10" style="font-size: 11.694444444444pt;" aria-label="gamedev (28 элементов)" data-wpel-link="internal">gamedev</a>
<a href="https://otus.ru/journal/tag/hr/" class="tag-cloud-link tag-link-103 tag-link-position-11" style="font-size: 8pt;" aria-label="hr (11 элементов)" data-wpel-link="internal">hr</a>
<a href="https://otus.ru/journal/tag/html/" class="tag-cloud-link tag-link-217 tag-link-position-12" style="font-size: 11.208333333333pt;" aria-label="HTML (25 элементов)" data-wpel-link="internal">HTML</a>
<a href="https://otus.ru/journal/tag/ios/" class="tag-cloud-link tag-link-101 tag-link-position-13" style="font-size: 8.9722222222222pt;" aria-label="iOS (14 элементов)" data-wpel-link="internal">iOS</a>
<a href="https://otus.ru/journal/tag/it/" class="tag-cloud-link tag-link-50 tag-link-position-14" style="font-size: 10.527777777778pt;" aria-label="IT (21 элемент)" data-wpel-link="internal">IT</a>
<a href="https://otus.ru/journal/tag/java/" class="tag-cloud-link tag-link-75 tag-link-position-15" style="font-size: 15.680555555556pt;" aria-label="Java (73 элемента)" data-wpel-link="internal">Java</a>
<a href="https://otus.ru/journal/tag/javascript/" class="tag-cloud-link tag-link-83 tag-link-position-16" style="font-size: 14.319444444444pt;" aria-label="JavaScript (53 элемента)" data-wpel-link="internal">JavaScript</a>
<a href="https://otus.ru/journal/tag/linux/" class="tag-cloud-link tag-link-141 tag-link-position-17" style="font-size: 11.888888888889pt;" aria-label="Linux (29 элементов)" data-wpel-link="internal">Linux</a>
<a href="https://otus.ru/journal/tag/machine-learning/" class="tag-cloud-link tag-link-167 tag-link-position-18" style="font-size: 8.6805555555556pt;" aria-label="Machine Learning (13 элементов)" data-wpel-link="internal">Machine Learning</a>
<a href="https://otus.ru/journal/tag/otus-book/" class="tag-cloud-link tag-link-261 tag-link-position-19" style="font-size: 9.9444444444444pt;" aria-label="otus book (18 элементов)" data-wpel-link="internal">otus book</a>
<a href="https://otus.ru/journal/tag/php/" class="tag-cloud-link tag-link-45 tag-link-position-20" style="font-size: 10.527777777778pt;" aria-label="PHP (21 элемент)" data-wpel-link="internal">PHP</a>
<a href="https://otus.ru/journal/tag/python/" class="tag-cloud-link tag-link-27 tag-link-position-21" style="font-size: 16.944444444444pt;" aria-label="Python (99 элементов)" data-wpel-link="internal">Python</a>
<a href="https://otus.ru/journal/tag/qa/" class="tag-cloud-link tag-link-155 tag-link-position-22" style="font-size: 11.402777777778pt;" aria-label="qa (26 элементов)" data-wpel-link="internal">qa</a>
<a href="https://otus.ru/journal/tag/sql/" class="tag-cloud-link tag-link-38 tag-link-position-23" style="font-size: 12.861111111111pt;" aria-label="SQL (37 элементов)" data-wpel-link="internal">SQL</a>
<a href="https://otus.ru/journal/tag/team-lead/" class="tag-cloud-link tag-link-364 tag-link-position-24" style="font-size: 9.9444444444444pt;" aria-label="team lead (18 элементов)" data-wpel-link="internal">team lead</a>
<a href="https://otus.ru/journal/tag/unity/" class="tag-cloud-link tag-link-24 tag-link-position-25" style="font-size: 8pt;" aria-label="unity (11 элементов)" data-wpel-link="internal">unity</a>
<a href="https://otus.ru/journal/tag/algoritmy/" class="tag-cloud-link tag-link-30 tag-link-position-26" style="font-size: 9.9444444444444pt;" aria-label="Алгоритмы (18 элементов)" data-wpel-link="internal">Алгоритмы</a>
<a href="https://otus.ru/journal/tag/bazy-dannyh/" class="tag-cloud-link tag-link-40 tag-link-position-27" style="font-size: 10.138888888889pt;" aria-label="Базы данных (19 элементов)" data-wpel-link="internal">Базы данных</a>
<a href="https://otus.ru/journal/tag/matematika/" class="tag-cloud-link tag-link-44 tag-link-position-28" style="font-size: 10.916666666667pt;" aria-label="Математика (23 элемента)" data-wpel-link="internal">Математика</a>
<a href="https://otus.ru/journal/tag/arhitektura-po/" class="tag-cloud-link tag-link-10 tag-link-position-29" style="font-size: 9.4583333333333pt;" aria-label="архитектура ПО (16 элементов)" data-wpel-link="internal">архитектура ПО</a>
<a href="https://otus.ru/journal/tag/bazy-dannyh-2/" class="tag-cloud-link tag-link-251 tag-link-position-30" style="font-size: 10.138888888889pt;" aria-label="базы данных (19 элементов)" data-wpel-link="internal">базы данных</a>
<a href="https://otus.ru/journal/tag/vebinar/" class="tag-cloud-link tag-link-201 tag-link-position-31" style="font-size: 13.930555555556pt;" aria-label="вебинар (48 элементов)" data-wpel-link="internal">вебинар</a>
<a href="https://otus.ru/journal/tag/dajdzhest/" class="tag-cloud-link tag-link-308 tag-link-position-32" style="font-size: 10.722222222222pt;" aria-label="дайджест (22 элемента)" data-wpel-link="internal">дайджест</a>
<a href="https://otus.ru/journal/tag/zapis-vebinara/" class="tag-cloud-link tag-link-226 tag-link-position-33" style="font-size: 14.902777777778pt;" aria-label="запись вебинара (61 элемент)" data-wpel-link="internal">запись вебинара</a>
<a href="https://otus.ru/journal/tag/zapis-uroka/" class="tag-cloud-link tag-link-272 tag-link-position-34" style="font-size: 16.069444444444pt;" aria-label="запись урока (80 элементов)" data-wpel-link="internal">запись урока</a>
<a href="https://otus.ru/journal/tag/informacionnaya-bezopasnost/" class="tag-cloud-link tag-link-232 tag-link-position-35" style="font-size: 10.138888888889pt;" aria-label="информационная безопасность (19 элементов)" data-wpel-link="internal">информационная безопасность</a>
<a href="https://otus.ru/journal/tag/karera-v-it/" class="tag-cloud-link tag-link-292 tag-link-position-36" style="font-size: 9.9444444444444pt;" aria-label="карьера в IT (18 элементов)" data-wpel-link="internal">карьера в IT</a>
<a href="https://otus.ru/journal/tag/podborka/" class="tag-cloud-link tag-link-7 tag-link-position-37" style="font-size: 12.666666666667pt;" aria-label="подборка (35 элементов)" data-wpel-link="internal">подборка</a>
<a href="https://otus.ru/journal/tag/podborka-statej/" class="tag-cloud-link tag-link-219 tag-link-position-38" style="font-size: 15.777777777778pt;" aria-label="подборка статей (75 элементов)" data-wpel-link="internal">подборка статей</a>
<a href="https://otus.ru/journal/tag/programmirovanie/" class="tag-cloud-link tag-link-65 tag-link-position-39" style="font-size: 22pt;" aria-label="программирование (332 элемента)" data-wpel-link="internal">программирование</a>
<a href="https://otus.ru/journal/tag/proekt/" class="tag-cloud-link tag-link-321 tag-link-position-40" style="font-size: 11.888888888889pt;" aria-label="проект (29 элементов)" data-wpel-link="internal">проект</a>
<a href="https://otus.ru/journal/tag/proektnaya-rabota/" class="tag-cloud-link tag-link-310 tag-link-position-41" style="font-size: 11.597222222222pt;" aria-label="проектная работа (27 элементов)" data-wpel-link="internal">проектная работа</a>
<a href="https://otus.ru/journal/tag/seti/" class="tag-cloud-link tag-link-181 tag-link-position-42" style="font-size: 12.958333333333pt;" aria-label="сети (38 элементов)" data-wpel-link="internal">сети</a>
<a href="https://otus.ru/journal/tag/testirovanie/" class="tag-cloud-link tag-link-69 tag-link-position-43" style="font-size: 13.930555555556pt;" aria-label="тестирование (48 элементов)" data-wpel-link="internal">тестирование</a>
<a href="https://otus.ru/journal/tag/upravlenie-komandoj/" class="tag-cloud-link tag-link-63 tag-link-position-44" style="font-size: 11.694444444444pt;" aria-label="управление командой (28 элементов)" data-wpel-link="internal">управление командой</a>
<a href="https://otus.ru/journal/tag/habr-2/" class="tag-cloud-link tag-link-203 tag-link-position-45" style="font-size: 13.930555555556pt;" aria-label="хабр (48 элементов)" data-wpel-link="internal">хабр</a></div>
</li>
			</ul>
		
	</div>

	</aside>		
	</div> <!-- .ts-row -->
</div> <!-- .main -->





<footer class="main-footer dark bold">

	

	


	
		<section class="lower-footer cf">
			<div class="wrap">

				
				
					<div class="links">
						<div class="menu-menju-navykov-container"><ul id="menu-menju-navykov-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10413"><a href="https://otus.ru/categories/programming/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Программирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10414"><a href="https://otus.ru/categories/architecture/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Архитектура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10415"><a href="https://otus.ru/categories/operations/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Инфраструктура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10416"><a href="https://otus.ru/categories/information-security-courses/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Безопасность<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10417"><a href="https://otus.ru/categories/data-science/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Data Science<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10418"><a href="https://otus.ru/categories/gamedev/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">GameDev<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10419"><a href="https://otus.ru/categories/marketing-business/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Управление<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10420"><a href="https://otus.ru/categories/analytics/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Аналитика и анализ<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10421"><a href="https://otus.ru/categories/testing/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Тестирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
</ul></div>					</div>

				

				<p class="copyright"> © 2015-2026 OTUS				</p>



									<div class="to-top">
						<a href="#" class="back-to-top"><i class="fa fa-angle-up"></i> Top</a>
					</div>
				
			</div>
		</section>

	

</footer>

</div> <!-- .main-wrap -->



<div class="mobile-menu-container off-canvas" id="mobile-menu">

	<a href="#" class="close"><i class="fa fa-times"></i></a>

	<div class="logo">
			</div>

	
		<ul class="mobile-menu"></ul>

	</div>



	<div class="search-modal-wrap">

		<div class="search-modal-box" role="dialog" aria-modal="true">
			

	<form method="get" class="search-form" action="https://otus.ru/journal/">
		<input type="search" class="search-field" name="s" placeholder="Search..." value="" required />

		<button type="submit" class="search-submit visuallyhidden">Submit</button>

		<p class="message">
			Type above and press <em>Enter</em> to search. Press <em>Esc</em> to cancel.		</p>
				
	</form>

		</div>
	</div>


<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/clearfy/components/comments-plus/assets/js/url-span.js" id="wbcr-comments-plus-url-span-js"></script>
<script type="text/javascript" id="ez-toc-scroll-scriptjs-js-extra">
/* <![CDATA[ */
var eztoc_smooth_local = {"scroll_offset":"30"};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/assets/js/smooth_scroll.min.js" id="ez-toc-scroll-scriptjs-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js" id="ez-toc-js-cookie-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js" id="ez-toc-jquery-sticky-kit-js"></script>
<script type="text/javascript" id="ez-toc-js-js-extra">
/* <![CDATA[ */
var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","scroll_offset":"30","fallbackIcon":"<span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span>"};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js" id="ez-toc-js-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/custom-script.js" id="custom-script-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/magnific-popup.js" id="magnific-popup-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/jquery.fitvids.js" id="jquery-fitvids-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/imagesloaded.min.js" id="imagesloaded-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/object-fit-images.js" id="object-fit-images-js"></script>
<script type="text/javascript" id="contentberg-theme-js-extra">
/* <![CDATA[ */
var Bunyad = {"custom_ajax_url":"\/journal\/chekboksy-i-ih-stilizaciya\/"};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/theme.js" id="contentberg-theme-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/theia-sticky-sidebar.js" id="theia-sticky-sidebar-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/jquery.slick.js" id="jquery-slick-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/jarallax.js" id="jarallax-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/masonry.min.js" id="masonry-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/jquery/jquery.masonry.min.js" id="jquery-masonry-js"></script>

</body>

</html>
<!-- Cache served by breeze CACHE - Last modified: Tue, 10 Mar 2026 15:03:55 GMT -->