Анимированные чекбоксы с использованием шрифт-иконок

Пример создания анимированых чекбоксов с использованием шрифт-иконок исключительно средствами CSS

by Andrey Dobrovoi

HTML

<h1>Анимированные чекбоксы с использованием шрифт-иконок</h1>

<!-- Список флажков -->
<ul>
	<li>
		<input type="checkbox" name="one" id="one" />
		<label for="one">Создать чекбокс</label>
	</li>
	<li>
		<input type="checkbox" name="two" id="two" />
		<label for="two">Связать с формой</label>
	</li>
	<li>
		<input type="checkbox" name="three" id="three" />
		<label for="three">Импортировать шрифт-иконки </label>
	</li>
	<li>
		<input type="checkbox" name="four" id="four" />
		<label for="four">Прописать иконки в псевдо-элементах</label>
	</li>
	<li>
		<input type="checkbox" name="five" id="five" />
		<label for="five">Запустить анимацию иконок</label>
	</li>
	<li>
		<input type="checkbox" name="six" id="six" />
		<label for="six">Выбрать цвет для иконок</label>
	</li>
</ul>

CSS

/* Импортируем 2 вида шрифтов */
/* Шрифт-иконки fontawesome */
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);
/* Exo+2 для текста* /
@import url(http://fonts.googleapis.com/css?family=Exo+2&subset=latin,cyrillic);

/* базовый сброс */
* {margin: 0; padding: 0;}

body {
	font-family: 'Exo 2', sans-serif;
	background: #eee;
	padding-top: 100px;
	color: #333;
    
}

h1 {
	font-size: 20px;
    font-weight: 400;
	padding: 15px;
	text-align: center;
    text-shadow: 1px 1px 4px #ccc;    
}

ul {
	width: 290px;
	margin: 0 auto;
}
ul li {
	list-style-type: none;
	padding: 10px;
}

/* Добавление пользовательских иконок чекбоксам */
label {
	position: relative;
	padding-left: 30px;
	font-size: 14px;
    line-height: 16px;
	cursor: pointer;
}
label:before, label:after {
	font-family: FontAwesome;
	font-size: 21px;
	/*абсолютное позиционирование*/
	position: absolute; top: 0; left: 0;
}
label:before {
	content: '\f096'; /*флажек снят*/
}
label:after {
	content: '\f046'; /*флажек включен*/
	/*иконки скрыты  с помощью 0 max-width и overflow hidden*/
	max-width: 0;
	overflow: hidden;
	opacity: 0.5;
	/*CSS3 переходы для анимированного эффекта*/
	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(0, 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%);}