Меняем оформление input checkbox с помощью CSS

Оформление элементов формы — это старая проблема. Ситуация несомненно улучшается, но финала пока не видно. С появлением псевдо-контейнеров :after и :before стало возможным без дополнительных элементов и скриптов кастомизировать элемент INPUT:CHECKBOX.

В разных браузерах этот элемент будет выглядеть по разному. Chrome, Opera, IE, Yandex и прочие — будут по мере сил и фантазии разработчиков выводить checkbox с собственным оформлением.

Квадрат и галочку нельзя изменить стандартными стилями вроде:

Поэтому стоит задача полностью заменить вывод стандартного элемента на свой, и мы сделаем это, используя только CSS.

План действий такой:

  1. Скрываем вывод чек-бокса;
  2. Формируем нужный внешний вид чекбокса в псевдо — элементе label:before;
  3. Дополнительные стили формируют внешний вид текущего статуса.

Важно, чтобы элемент Label был связан с чекбокс (через параметр for), тогда нажатие на метку передаётся на связанный элемент, и все работает как нужно без дополнительных скриптов.

Теперь внешний вид становится везде одинаковым и выглядит вот так:

Как видите для вывода галочки я использовал просто символ «x» из шрифта Arial. Далее вы можете сами решать как выглядит контейнер и галочка.

Я к примеру использую шрифт awesome, в котором есть литера галочки.

Вот тот же CSS с использованием FontAwesome:

Так выглядит checkbox с галочкой из набора иконок Awesome.

Мало букафф? Читайте есчо !

Выравнивание блока HTML (вертикально и горизонтально)

Сентябрь 17, 2015 г.

Центровка элемента - одна из типовых задач в верстке. Решать её можно по разному, рассмотрим некоторые способы. Горизонтальная центровка. С центровкой ...

Читать

Способы прижать HTML элемент к нижнему краю экрана

Сентябрь 14, 2015 г.

Много занимаюсь версткой, потому возникают разные интересные задачи. Решил не оставлять без внимания этот интересный опыт. Одна из таких задач, которая ...

Читать

Как запретить растягивание textarea

Февраль 27, 2017 г.

Тэг TextArea - незаменимое поле ввода для текста. Современные браузеры по-умолчанию позволяют пользователям изменять размеры, растягивать его за правый ...

Читать

Как работает position: sticky с bottom: 0 и почему он "не работает"

Август 6, 2025 г.

Иногда кажется, что position: sticky работает только с top. Указываешь bottom: 0 — и ничего не происходит. Особенно, если пытаешься сделать так, чтобы элемент "прилип" к нижней границе контейнера при прокрутке. Почему так? На деле position: sticky ...

Читать
 

Комментарии к «Меняем оформление input checkbox с помощью CSS»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий:

Много комментариев в “Меняем оформление input checkbox с помощью CSS”

  1. Alexandr:

    Спасибо, классный способ, простой и рабочий

  2. Vlaadislav:

    Не хрена не работает!, работает только если рядом вставить стандартный без стилей и нажимать на стандартный и будет сразу так только не поверх а где-то рядом

  3. Евгений:

    Подскажите, как сделать так, чтобы менялся цвет текста в чекбоксе при положении checked

  4. Никита:

    Все работает, но что делать если мне нужно поставить две такие кнопки и когда я нажимаю на вторую, то активируется из-за этого первая?

    • Обычно для элементов формы используют какие то wrapper-ы, т.е. контейнеры-обертки. Вы, видимо, это не практикуете. :) Попробуйте поместить каждый input с label, например внутрь div.

  5. Ardzh:

    2 часа ничего не работало, пока не увидел ошибки в названии своего класса. Автору респект!