• 1649
  • 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Искал себе на сайт красивые чекбоксы,нашел и делюсь с вами.
И так приступим
1.В файле main.tpl в head подключаем необходимые шрифты

Код:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Exo+2&subset=latin,cyrillic" rel="stylesheet" type="text/css">
2.В файл стилей шаблона добавляем стили для наших чекбоксов
Код:
/* добавляем шрифт-иконки чекбоксам */
label {
position: relative;
padding-left: 30px;
font-size: 14px;
line-height: 16px;
cursor: pointer;
}
label:before, label:after {
/* абсолютное позиционирование */
position: absolute; top: 0; left: 0;
font-size: 21px;
font-family: FontAwesome;
}
label:before {
content: '\f096'; /* флажек снят */
}
label:after {
overflow: hidden;
/* иконки скрыты с помощью 0 max-width и overflow hidden */
max-width: 0;
content: '\f046'; /*флажек включен*/
opacity: 0.5;
/* переходы для анимации */
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
-o-transition: all 0.35s;
transition: all 0.35s;
}

/* скрываем оригинальные флажки */
input[type="checkbox"] {
display: none;
}
/* когда пользователь нажимает флажок запускается анимация*/
input[type="checkbox"]:checked + label:after {
max-width: 25px; /*произвольное число больше ширины иконки*/
opacity: 1; /*для эффекта плавного появления*/
}

/*добавляем красок в оформление чекбоксов*/
#one+label:before, #one+label:after {color: hsl(240, 45%, 40%);}
#two+label:before, #two+label:after {color: hsl(60, 45%, 40%);}
#three+label:before, #three+label:after {color: hsl(120, 45%, 40%);}
#four+label:before, #four+label:after {color: hsl(180, 45%, 40%);}
#five+label:before, #five+label:after {color: hsl(240, 45%, 40%);}
#six+label:before, #six+label:after {color: hsl(300, 45%, 40%);}

3.И теперь код самих чекбоксов
Код:
<input type="checkbox" name="one" id="one" />
<label for="one">Создать чекбокс</label>
4.Вот и все куда ставить их ваше дело,я добавил их в опросы ,и как видите работают.Будут вопросы спрашивайте.

Можешь почитать и вот эту статейку "теги и атрибуты HTML5"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Ваше отношение к TWIG
Результаты

----