Чекбоксы и радиокнопки картинками на CSS

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

Демо Демо 2

Для начала определимся с HTML-разметкой.

1
2
3
4
5
6
7

 <div class="checkbox col-md-2 col-4">
    <input id="checkbox2" type="radio" name="service" value="35" required=""/>
    <label for="checkbox2">
    <img src="./img/viber.png" class="radio-img"/>
    <span class="text-center">Viber</span>
    </label>
  </div>

И сам CSS код. Он может показаться массивным. но это только на первый взгляд. При желании его можно немного сократить.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

/* CHECKED STYLES */
.checkbox input[type=radio]{
    display:none;
}
 
[type=radio]:checked + img {
    display: block;
    background: #333;
    transition: .5s;
    transform: scale(0.8);
    border-radius: 10px;
}
.checkbox label{
    display:block;
    cursor:pointer;
    position:relative;
}
.checkbox span{
    margin:5px;
    display:block;
    font-weight: 500;
    color: #666;
}
.checkbox label:before{
    content:"";
    display:block;
    width:50px;
    height:50px;
    margin:auto;
    position:absolute;
    right:0;
    top:0;
    background-color:transparent;
    /*  border-radius:50px;
    */}
.checkbox label:after{
    content:"";
    display:block;
    width:26px;
    height:12px;
    margin:auto;
    position:absolute;
    right: 10px;
    top: 15px;
    border-left:5px solid transparent;
    border-bottom:5px solid transparent;
    transform:rotate(-45deg);
}
.checkbox input[type=radio]:checked + label:before{
    background-color:#f44336;
}
.checkbox input[type=radio]:checked + label:after{
    border-color:#ffeb3b;
}
.radio-img {
    width: 100%;
}
@media(max-width: 500px){
    .checkbox label:before{
        width: 35px;
        height: 35px;
    }
    .checkbox label:after{
        right: 6px;
        top: 9px;
        width: 21px;
        height: 12px;
    }
}
/*End checkbox*/

Сначала мы скрываем родной элемент (.checkbox input[type=radio]), потом задаем параметры картинке и для label создаем псевдоэлементы BEFORE и AFTER. Они-то и будут отвечать за визуальное оформление чекбокса. Цвет фона и самой галочки можно изменить по вашему усмотрению.

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