Необычные переключатели-флажки и радиокнопки с использованием только CSS3

5 марта 2015 | Опубликовано в css | Нет комментариев »

Можно задавать стили элементам разными способами при помощи CSS. Но с элементами форм все не так просто. Легко задать стили с помощью CSS текстовым полям ввода, а для переключателей-флажков и радиокнопок сделать это очень сложно. В этом уроке мы покажем, каким способом можно задать стили этим элементам и сделать их привлекательными, используя только CSS.

Демонстрация работы – Скачать исходный код

Основы

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

Тогда мы сможем использовать псевдоклассы для удобного задания стилей.

Этот способ работает во всех современных браузерах, таких как Internet Explorer, Firefox, Opera и Chrome.

Чем можно воспользоваться

Так чем же можно воспользоваться, чтобы создать нужные эффекты? Мы можем использовать псевдоклассы :after, :before, чтобы не пришлось добавлять еще больше кода HTML. А для радиокнопок и переключателей-флажков можно использовать псевдокласс :checked. Еще можно использовать и другие псевдоклассы, такие как :hover и :active.

Используя эти псевдоклассы можно создать очень интересные и неповторимые элементы форм.

Начнем

Для начала давайте создадим несколько переключателей-флажков и радиокнопок. Мы создадим по два вида этих элементов форм: один маленький и другой большой. Но кроме элементов ввода с типами, идентификаторами, именами и классами нам понадобится подпись, расположенная после каждого элемента ввода. После это мы воспользуемся атрибутом for для того, чтобы связать каждую подпись с соответствующим элементом ввода. Код HTML будет таким:

<div>
		<label>Checkbox Small</label>
		<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" />
		<nput type="checkbox" id="checkbox-1-2" class="regular-checkbox" />
		<input type="checkbox" id="checkbox-1-3" class="regular-checkbox" />
		<input type="checkbox" id="checkbox-1-4" class="regular-checkbox" />
	</div>
	<div>
		<label>Checkbox Big</label>
		<input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox" />
		<input type="checkbox" id="checkbox-2-2" class="regular-checkbox big-checkbox" />
		<input type="checkbox" id="checkbox-2-3" class="regular-checkbox big-checkbox" />
		<input type="checkbox" id="checkbox-2-4" class="regular-checkbox big-checkbox" />
	</div>
	<div>
		<label>Radio Small</label>
		<div class="button-holder">
			<input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" checked />
			<input type="radio" id="radio-1-2" name="radio-1-set" class="regular-radio" />
			<input type="radio" id="radio-1-3" name="radio-1-set" class="regular-radio" />
			<input type="radio" id="radio-1-4" name="radio-1-set" class="regular-radio" />
		</div>
	</div>
	<div>
		<label class="radio-1">Radio Big</label>
		<div class="button-holder">
			<input type="radio" id="radio-2-1" name="radio-2-set" class="regular-radio big-radio" />
			<input type="radio" id="radio-2-2" name="radio-2-set" class="regular-radio big-radio" />
			<input type="radio" id="radio-2-3" name="radio-2-set" class="regular-radio big-radio" checked />
			<input type="radio" id="radio-2-4" name="radio-2-set" class="regular-radio big-radio" />
			<input type="radio" id="radio-2-5" name="radio-2-set" class="regular-radio big-radio" />
		</div>
	</div>

Перейдем к коду CSS. Мы задаем стили не самой форме ввода, а подписи. Так что обратимся к ней следующим образом:

.regular-checkbox + label { }

И зададим самим переключателям-флажкам и радиокнопкам свойство display: none;, чтобы они не отображались.

Теперь зададим стили маленькому переключателю-флажку. Добавим ему тени блока и границы:

.regular-checkbox {
	-webkit-appearance: none;
	background-color: #fafafa;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 9px;
	border-radius: 3px;
	display: inline-block;
	position: relative;
}

После этого зададим стили для активного состояния, когда пользователь нажимает на переключатель-флажок, и для состояния, когда переключатель-флажок установлен:

.regular-checkbox:active, .regular-checkbox:checked:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
.regular-checkbox:checked {
	background-color: #e9ecee;
	border: 1px solid #adb8c0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	color: #99a1a7;
}

Затем мы зададим стили для псевдокласса :after. В них будет находится галочка для состояния, когда переключатель-флажок установлен, которую мы создадим с помощью свойства content:

.regular-checkbox:checked:after {
	content: '\2714';
	font-size: 14px;
	position: absolute;
	top: 0px;
	left: 3px;
	color: #99a1a7;
}

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

.big-checkbox {
	padding: 18px;
}
.big-checkbox:checked:after {
	font-size: 28px;
	left: 6px;
}

У радиокнопок все примерно так же, только в этот раз закруглим углы и используем отдельный элемент, а не свойство content, для выбранной радиокнопки:

.regular-radio {
	-webkit-appearance: none;
	background-color: #fafafa;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 9px;
	border-radius: 50px;
	display: inline-block;
	position: relative;
}

.regular-radio:checked:after {
	content: ' ';
	width: 12px;
	height: 12px;
	border-radius: 50px;
	position: absolute;
	top: 3px;
	background: #99a1a7;
	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
	text-shadow: 0px;
	left: 3px;
	font-size: 32px;
}

.regular-radio:checked {
	background-color: #e9ecee;
	color: #99a1a7;
	border: 1px solid #adb8c0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
}

.regular-radio:active, .regular-radio:checked:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.big-radio {
	padding: 16px;
}
.big-radio:checked:after {
	width: 24px;
	height: 24px;
	left: 4px;
	top: 4px;
}

Вот и все! Можете посмотреть демонстрацию работы или скачать исходный код. Надеемся, вам понравился этот урок.

Автор урока Johnny Simpson

Перевод — Дежурка

Смотрите также:

Опубликовано в css, марта 5, 2015
Метки: css3, кнопка css3, кнопки, переключатели ui, урок css3

�

Коментарии запрещены.

Необычные переключатели-флажки и радиокнопки с использованием только CSS3

Основы

Чем можно воспользоваться

Начнем

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые