Меняем оформление 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.

Написать комментарий

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

Почему не работает стиль :: before или :: after?

Октябрь 22, 2017 г.

Замечательные псевдо-классы, которые позволяют добавить виртуальные контейнеры в начало или конец контейнера. Как они работают и почему могут "не сработать"? ...

Читать

Делаем эффект параллакса для заднего фона на сайте

Октябрь 19, 2015 г.

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

Читать

 

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

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



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

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

  1. Alexandr:

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

  2. Vlaadislav:

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

  3. Евгений:

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

  4. Никита:

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

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

  5. Ardzh:

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