Изменение чекбоксов с помощью CSS

Когда, то давно, для изменения внешних видов чекбокса использовались JavaScript-решения, но теперь уже это не нужно. С появлением CSS3, эта проблема отпала и уже дано. Тем неимение, многие не знают или просто не встречали возможного решения. Лично я, тоже не сразу узнал об этом методе, но уже где-то с 15 года использую его при верстках лендингов или каких-то форм. Если Вам не нравится то как выглядит обычный чекбокс и вы хотите придать ему более современный внешний вид, то нужно будет выполнить всего несколько действий. В итоге у вас получится так как на примере.

Такой стильный чекбокс делается с помощью псевдоселекторов :checked и :not. По своей сути мы будим эмулировать работу чекбокса, а сам чекбокс станет невидимым.

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

<input  type="checkbox" name="check"  value="Название">

Вам нужно его доработать и сделать таким:

<input class="check" type="checkbox" name="check" id="newchec" value="Название">
<label for="newchec">Обязательный label</label>

Разберем по порядку обязательные параметры:

• class=check - добавляем класс, чтобы все чекбоксы у которых будет этот класс имели измененный вид.
• id=newchec - добавляем айди, для того, чтобы подвязать к чекбоксу label. Так же, если вам нужно выделить лишь один чекбокс, то можете не добавлять класс, а прописывать стили для этого самого айди. Естественно, и класс и айди может иметь любое название.
• label - вторая строка, которая отвечает за вывод метки к нашему чекбоксу. Ее наличие обязательно. Даже если вам не нужна метка, то всеравно нужно добавить label, даже пустой.
• for=newchec - идентификатор элемента, с которым следует установить связь. В нашем случаи это наш чекбокс. Как понимаете Значение for должно соответствовать id нашего чекбокса.

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

Открываете файл стилей и добавляете туда такой кусок кода:

.check{
vertical-align:top;
margin:0 3px 0 0;
width:10px;
height:10px;
}
.check + label{
cursor:pointer;
}
.check:not(checked){
position:absolute;
opacity:0;
}
.check:not(checked) + label{
position:relative;
padding: 0 0 0 60px;
}
.check:not(checked) + label:before{
content: '';position:
absolute;
top:0;
left:0;
width:40px;
height:20px;
border-radius:10px;
background: #CDD1DA;
box-shadow:inset 0 2px 3px rgba(0,0,0,.2);
-webkit-box-shadow:inset 0 2px 3px rgba(0,0,0,.2);
-moz-box-shadow:inset 0 2px 3px rgba(0,0,0,.2);
}
.check:not(checked) + label:after{
content:'';
position:absolute;
top:0;
left:2px;
width:20px;
height:20px;
border-radius:10px;
background:#fff;
box-shadow:0 2px 5px rgba(0,0,0,.3);
-webkit-box-shadow:0 2px 5px rgba(0,0,0,.3);
-moz-box-shadow:0 2px 5px rgba(0,0,0,.3);
transition: all .2s;
}
.check:checked + label:before{
background:#2ebbde;
}
.check:checked + label:after {
left:20px;
}

Для тех кто разбирается в CSS, становится все понятно после его осмотра. Чего-то сложного здесь нет. Для тех, кто еще не совсем легко в этом разбирается, немного распишу. Учить CSS я тут не буду, мне лень расписывать каждый параметр, для этого есть книжки по CSS.

• Первым делом - задаем стили для старых версий браузера IE. Тут просто немного ровняется стандартный чекбокс.

  .check{
  vertical-align:top;
  margin:0 3px 0 0;
  width:10px;
  height:10px;
  }
  

• Делаем наш label кликабельным. При наведении на него будет появляться рука вместо стрелки.

  .check + label{
  cursor:pointer;
  }
  

• Далее уже начинаем модернизировать наш чекбокс. Делаем наш обычный чекбокс невидимым.

  .check:not(checked){
  position:absolute;
  opacity:0;
  }
  

• Делаем позиционирование новому чекбоксу относительно нашего label

  .check:not(checked) + label{
  position:relative;
  padding: 0 0 0 60px;
  }
  

• Настройка вида для выключенного чекбокса, когда ползунок слева и фон серый.

  .check:not(checked) + label:before{
  content: '';position:
  absolute;
  top:0;
  left:0;
  width:40px;
  height:20px;
  border-radius:10px;
  background:#ccc;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.2);
  -webkit-box-shadow:inset 0 2px 3px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 2px 3px rgba(0,0,0,.2);
  }
  

• Это внешний вид нашего круглого ползунка.

  .check:not(checked) + label:after{
  content:'';
  position:absolute;
  top:0;
  left:2px;
  width:20px;
  height:20px;
  border-radius:10px;
  background:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.3);
  -webkit-box-shadow:0 2px 5px rgba(0,0,0,.3);
  -moz-box-shadow:0 2px 5px rgba(0,0,0,.3);
  transition: all .2s;
  }
  

• Цвет заднего фона когда ползунок справа, то есть чекбокс активирован.

  .check:checked + label:before{
  background:#2ebbde;
  }
  

• Настройка расстояния на сколько будет смещаться ползунок при активации чекбокса.

  .check:checked + label:after {
  left:20px;
  }
  

• Этот параметр я применил в третьем чекбоксе. Он задает тень при фокусировке на чекбоксе. Можете его не добавлять, тогда будет как на втором.

  .hec:focus + label:before {
  box-shadow: 0 0 2px 2px rgba(0,0,0, .4);
  }
  

Естественно, вы можете все менять на свой лад. Методом проб и ошибок подгоните все как нужно именно вам. Согласитесь, такой чекбокс намного симпатичнее стандартного. Если понравился данный метод, надеюсь вы используете его в будущем на своем сайте. В следующей статье покажу как схожим методом модифицировать круглую радиокнопку.

На этом все, спасибо за внимание. 🙂