Стилизация чекбоксов и радио-кнопок

17.04.2016

Стилизация элементов форм важная часть работы веб-разработчика. Не стилизованные элементы форм в разных браузерах и операционных системах выглядят по-разному. А это не всегда вписывается в дизайн. Рассмотрим стилизацию чекбоксов (checkbox) и радио-кнопок (radio). Стилизация этих элементов совсем не сложная и позволяет обойтись средствами CSS.

Самый нормальный вариант таков:

HTML

	
		<input id="mycheck" type="checkbox">
		<label for="mycheck">Выбрать</label>

CSS

	
		input{
			display: none;
		}
		label{
			position: relative;
			cursor: pointer;
			padding-left: 30px; /*отведем место для before*/
		}
		label:before{
			content: "";
			display: block;
			width: 22px;
			height: 22px;
			position: absolute;
			left: 0;
			top: 0;
			background-image: url(../images/star.png);
			background-position: 0 0;
		}
		input:checked + label:before{
			background-position: 0 100%;
		}

Пример:

Leave a Reply

*

code