Дизайн та розробка сайту

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

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

Доброго времени суток. 🙂

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

Изменение чекбоксов с помощью 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);
    }
    

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

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

Дизайн та розробка сайту

Back to top