Стилизация чекбоксов и радиокнопок на чистом CSS
Блог
Делимся с Вами своими знаниями и новостями
23.05.2018

Стилизация чекбоксов и радиокнопок на чистом CSS

Стилизация чекбоксов и радиокнопок на чистом CSS одна из тех вещей, которая делает Ваш сайт поистине индивидуальным. Но тут многие сталкиваются с проблемами. В этой статье мы научимся делать наши checkbox и radiobutton просто очень крутыми.

Сразу спешу сказать, что данный код позаимствован у Dimox, ссылку на оригинал ищите внизу статьи. В своей статье он максимально создал то, за что мы любим все веб-программирование, это когда такие вещи, которые всегда реализовывали только с помощью JavaScript, сегодня можно сделать на чистом CSS. Итак, приступим. Да, совсем забыл сказать, в оригинальной статье пишут и про совместимость со старыми браузерами. Но на сегодняшний момент я не вижу в этом смысла. И считаю, что мы будем сразу идти в ногу со временем.

Важные особенности

Чтобы всё получилось, важно учитывать следующее:

  1. Кроме, собственно, самого тега элемента, который мы хотим красиво оформить ( <input type="checkbox"> или  <input type="radio">), понадобится тег  <label>, благодаря которому переключать элемент можно, кликая на текст, а не только на сам элемент.
  2. Тег  <input> должен находиться до тега  <label> (в этом случае состояние элемента формы переключается с помощью атрибута  for), либо он должен находиться внутри тега  <label> (в этом случае атрибут  for не нужен, но понадобится тег-обертка для текста), но данный вариант мы не будем рассматривать в этой статье. Мы считаем, что работать с  for самый оптимальный вариант.

«Фокус» заключается в использовании псевдоселекторов  :checked и  :not. При этом сам чекбокс или радиокнопка делаются невидимыми, а их эмуляция осуществляется с помощью псевдоэлементов  :before и  :after для тега  <label> или вышеупомянутого тега-обертки.

Стилизация для современных браузеров

В HTML-коде это выглядит следующим образом:

Еще раз хотим заострить ваше внимание — тег  <input> обязательно должен быть расположен перед тегом  <label>. Если вы поменяете их местами, ничего работать не будет.

CSS-код для чекбокса будет таким:

CSS-код для радиокнопки будет таким:

С помощью свойств  positionz-index и  opacity для классов  .checkbox и  .radio мы визуально прячем оригинальные элементы, при этом они остаются на том же самом месте, где будут стилизованные элементы. А с помощью  margin немного смещаем их, чтобы сообщение валидации HTML5 смотрелось гармонично. В зависимости от дизайна чекбокса и радиокнопки этот отступ можно подогнать.

Спасибо огромное за данное решение Dimox. Оригинал статьи можете прочитать здесь. Вот таким несложным образом это и делается. Благодаря данному способу, оформить чекбоксы и радиокнопки с помощью CSS можно так, как вам будет угодно.

Метки:

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

Свяжитесь с нами уже сейчас




Отправляя нам сообщение, содержащее Ваши персональные данные, Вы соглашаетесь с нашей политикой конфиденциальности.
Онлайн заявка


Отправляя нам сообщение, содержащее Ваши персональные данные, Вы соглашаетесь с нашей политикой конфиденциальности.