Как сделать кастомный чекбокс css

Стилизация checkbox. Кастомные чекбоксы

Стилизация checkbox &#8212; то, с чем сталкивается каждый начинающий верстальщик. Часто это становится проблемой и занимает много времени. Но после этого урока вы сможете делать кастомные чекбоксы любого вида. Суть любого стилизованного чекбокса &#8212; спрятать оригинальные чекбокс, и активировать его с помощью клика на <label> . Если вы сможете понять принцип работы, в дальнейшем у вас не возникнет сложностей со стилизацией чекбоксов и радио кнопок. Большим преимуществом описанного метода является то, что мы не лишаемся стандартной валидации и не возникает никаких проблем при отправке формы. Мы по максимуму используем встроенный в браузер функционал, что всегда хорошо.

Если вы сразу хотите посмотреть готовый код и пример &#8212; добро пожаловать на codepen .

Стилизация checkbox &#8212; HTML разметка

Как я и говорил, основная суть в создании кастомных чекбоксов &#8212; скрыть оригинальный чекбокс и создать свой, со своим дизайном и активированным состоянием. HTML код не очень сложный, описывать там нет особо чего, поэтому я просто оставлю комментарии в нем. Единственное, что нужно уточнить &#8212; я использую код svg иконки, вы же можете использовать любую картинку в этом месте с помощью тега <img> , или вообще текст.

CSS код для создания кастомного чекбокса

Для css кода так же оставлю комментарии. Как видно, оригинальный чекбокс мы скрываем совсем. Далее элемент .checkbox стилизуем под сам чекбокс. Иконку просто выравниваем по центру и скрываем её. Далее указываем, что при активированном чекбоксе иконка должна отображаться. Как и говорилось раньше, активироваться чекбокс будет за счет <label>

Как результат получим кастомный чекбокс

Спасибо, что прочитали! Если у вас остались любые вопросы &#8212; задавайте их в комментариях на YouTube, или пишите мне в Telegram, с радостью всем помогу.

Создание доступных чекбоксов и радиокнопок на чистом CSS

Создание доступных чекбоксов и радиокнопок на чистом CSS

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

Ни один из вышеперечисленных методов не дает мне то, чего я хочу. Я нашел простой способ, который очень просто обслуживать, и который не идет на компромиссы. Приступим! Нам понадобится:

псевдоэлементы ::before и ::after

CSS псевдокласс :checked

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Представленная тройка хорошо поддерживается почти во всех браузерах (IE 10 и выше).

В этой статье я продемонстрирую способ на чекбоксах. С радиокнопками подход такой же, только немного отличаются стили.

Как сделать кастомный checkbox на JS?

Решил сделать чекбокс на JS, потому-что с CSS-ом геморно кастомный чекбокс замутить.
Сделал все это дело через замену значения атрибута img.
Проблема в том что этот скрипт работает, но только при двух нажатиях, то есть, срабатывают операторы if и else по разу и далее не реагируют. Что подскажете?

  • Вопрос задан более двух лет назад
  • 1111 просмотров
  • Facebook
  • Вконтакте
  • Twitter

Ankhena

(усовершенствованный вариант со специально видимым фокусом, который потом можно кастомизировать как хочется)

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

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