Анимированный checkbox с помощью css3 без jquery и плагинов

ktvdru

К сожалению, нельзя через css обстилеть input[type=»checkbox»]. В статье рассмотрен метод кастомизации чекбокса путем наложения картинки с анимированным псевдоэлементом поверх дефолтного.

Анимированный checkbox с помощью CSS3

Пример чекбокса, который должен получиться:

Текст около чекбокса

Для такого чекбокса понадобятся 2 картинки (если у вас нет картинок, ниже будет описан способ без них): картинка самого чекбокса и галочки, которая будет добавляться в выбранном состоянии:

анимированный checkbox на css3анимированный checkbox на css3

Вот такая разметка была у чекбокса изначально:

1
2

<input type="checkbox">
<span class="text">Текст около чекбокса</span>

CSS:

1
2
3

input[type="checkbox"] {
    margin-right: 10px;
}

Для начала нужно немного усложнить разметку:

1
2
3
4

<label class="checkbox-outer">
     <input type="checkbox">
     <span class="checkbox-pic"></span></label>
     <span class="text">Текст около чекбокса</span>													</span>

Добавился оборачивающий label и span «checkbox-pic», который содержит картинку нового чекбокса.

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

.checkbox-outer {
     width: 16px; 
     height: 16px; 
     display: block; 
     position: relative; 
     float: left; 
     margin-left: 1px; 
     margin-right: 4px;
} 
 
.checkbox-outer input[type="checkbox"] {
     margin: 0; 
     padding: 0;} 
 
.checkbox-pic {
     position: absolute; 
     left: 0; 
     top: 5px; 
     width: 16px; 
     height: 16px; 
             /*width, height, left и top подгоняем под размеры текущего input, чтоб картинка скрыла его полностью*/
     cursor: pointer; 
     display: block; 
     background: url('images/empty-checkbox.png') #e8eff4 0 0 no-repeat; 
            /*сюда вставляем картинку пустого квадратика-чекбокса, 
              #e8eff4 - цвет фона, если цвет страницы вашего сайта белый, то меняем на white */
} 
 
.checkbox-pic:before {
      content: " "; 
      width: 17px;  
      height: 18px; 
      display: block; 
      position: absolute;    
      left: 0px; 
      top: 0px; 
      background: url('images/checking.png') top left no-repeat; 
            /*cюда вставляем картинку с галочкой от чекбокса*/
      opacity: 0; 
            /*у невыбранного чекбокса галочка отсутствует, поэтому скрываем ее*/
      transform: scale(3) rotateZ(-20deg); 
      -moz-transform: scale(3) rotateZ(-20deg);     
      -o-transform: scale(3) rotateZ(-20deg); 
      -webkit-transform: scale(3) rotateZ(-20deg); 
      -webkit-transition: all 0.5s ease;  
      -moz-transition: all 0.5s ease; 
      -ms-transition: all 0.5s ease; 
      -o-transition: all 0.5s ease; 
      transition: all 0.5s ease; 
} 
.checkbox-outer input[type="checkbox"]:checked + .checkbox-pic:before { 
           /*стили для появления галочки при выбранном состоянии, тут меняется opacity с применением анимации*/
      opacity: 1;
      transform: scale(1) rotateZ(0deg); 
      -moz-transform: scale(1) rotateZ(0deg); 
      -webkit-transform: scale(1) rotateZ(0deg); 
      -o-transform: scale(1) rotateZ(0deg); 
      -ms-transform: scale(1) rotateZ(0deg); 
      -webkit-transition: all 0.5s ease; 
      -moz-transition: all 0.5s ease; 
      -ms-transition: all 0.5s ease; 
      -o-transition: all 0.5s ease;     
      transition: all 0.5s ease; }

Живой пример на jsfiddle: Демо

Анимированный чекбокс без использования картинок

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

Рассмотрим пример с подключением иконочного шрифта Font Awesome. Тут ссылка для подключения шрифта.
Иконки Font Awesome.

— fa-square-o подходит для пустого чекбокса
— fa-check — галочка
(естественно, вы можете брать любые другие понравившиеся иконки, чтобы вместо галочки был, например, цветочек, и т.д. :))

Вот что получилось:

Текст около чекбокса

Разметка изменилась совсем немного, теперь вместо checkbox-pic пояислись два i — первый для иконки пустого чекбокса, второй для галочки:

1
2
3
4
5
6

<label class="checkbox-outer">
    <input type="checkbox">
    <i class="fa fa-square-o" aria-hidden="true"></i>
    <i class="fa fa-check" aria-hidden="true"></i>
</label>
<span class="text" style="margin-left: 15px;">Текст около чекбокса</span>

СSS:

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

.fa-square-o { 
     position: absolute; 
     left: 0; 
     top: 2px; 
     font-size: 22px; 
     cursor: pointer; 
     display: block; 
     background: #e8eff4;     
     color: #6583bd; 
}  
.fa-check {
     font-size: 22px; 
     display: block; 
     position: absolute; 
     color: #5aaeda;   
     left: 0px; 
     top: 0px; 
     opacity: 0;
     transform: scale(3) rotateZ(-20deg); 
     -moz-transform: scale(3) rotateZ(-20deg);   
     -o-transform: scale(3) rotateZ(-20deg); 
     -webkit-transform: scale(3) rotateZ(-20deg); 
     -o-transform: scale(3) rotateZ(-20deg); 
     -webkit-transition: all 0.5s ease;  
     -moz-transition: all 0.5s ease; 
     -ms-transition: all 0.5s ease; 
     -o-transition: all 0.5s ease; 
     transition: all 0.5s ease; 
} 
.checkbox-outer input[type="checkbox"]:checked + .fa-square-o + .fa-check {
     opacity: 1;
     transform: scale(1) rotateZ(0deg); 
     -moz-transform: scale(1) rotateZ(0deg); 
     -webkit-transform: scale(1) rotateZ(0deg); 
     -o-transform: scale(1) rotateZ(0deg); 
     -ms-transform: scale(1) rotateZ(0deg);   
     -webkit-transition: all 0.5s ease; 
     -moz-transition: all 0.5s ease; 
     -ms-transition: all 0.5s ease; 
     -o-transition: all 0.5s ease;     
    transition: all 0.5s ease; 
}

Демо этого примера на jqfiddle.

One thought on “Анимированный checkbox с помощью css3 без jquery и плагинов”

Добавить комментарий для StudyDocx Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *