Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Чекбоксы и переключатели с помощью CSS Категория: CSS
Название: Чекбоксы и переключатели с помощью CSS
Дата добавления: 22-07-2012
Раз просмотрено: 1475
Комментарии: 0
Рейтинг: · · · · · · · · · · (0 голосов)

Чекбоксы и переключатели с помощью CSS

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

Основы

По сути, единственным способом стилизовать чекбоксы, переключатели и выпадающие списки является использование такого небольшого CSS кода:

appearance: none;

Это сбросит все стили браузера у элементов и бы можем начать изменять их, как стандартные. Они будут иметь все те же свойства, что и раньше, но потеряют свой вид, характерный в конкретном браузере и операционной системе. К сожалению, это свойство поддерживают только WebKit браузеры (Chrome и Safari). Это дает нам около 40% рынка браузеров.

Как ни странно, этого вполне достаточно. Пользователи WebKit браузеров увидят необычные и привлекательные элементы формы, в то время, как пользователи Opera, Internet Explorer и Firefox увидят стандартные чекбоксы и переключатели.

Что мы можем использовать?

Итак, какие инструменты мы можем использовать для создания этих эффектов? Для создания дополнительных элементов м можем использовать :after и :before, таким образом нам не нужно будет изменять HTML разметку. Для переключателей и чекбоксов мы можем использовать псевдо-селектор :cheked. Так же, для дополнительных эффектов при наведении, мы будем использовать псевдо-селектор :hover. С помощью всего этого, мы сможем создавать довольно интересные и необычные элементы формы.

HTML

Мы не будем изменять HTML код формы, все что вам нужно — это вставить обычные чекбоксы и переключатели на вашу страницу:

<input type="checkbox" />
<input type="radio" />

CSS

Чекбоксы

Начнем стилизацию с чекбоксов. Для начала, удалим стандартную стилизацию с помощью рассмотренного выше свойства appearance с вендорным префиксом для WebKit браузеров, а затем стилизуем чекбокс, например, добавим границы и тени. Для выбранного чекбокса используем псевдо-селектор :active.

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

input[type='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;
}

input[type='checkbox']:active, input[type='checkbox']:checked:active {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
}
 
input[type='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;
}

input[type='checkbox']:checked:after {
	content: '\2714';
	font-size: 14px;
	position: absolute;
	top: 0px;
	left: 3px;
	color: #99A1A7;
}

В итоге, в WebKit браузерах мы получим вот такие чекбоксы:

Стилизованные чекбоксы в WebKit браузерах

Переключатели

Стилизация переключателей не сильно отличается от стилизации чекбоксов. Просто мы будем использовать сильное скругление элемента для создания круга, а для создания эффекта выбранного переключателя мы вместо текста будем использовать обычный элемент.

input[type='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;
}
 
input[type='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;
}
 
input[type='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);
}
 
input[type='radio']:active, input[type='radio']:checked:active {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
}

Вот так будет выглядеть полученный нами результат:

Стилизованные переключатели в WebKit браузерах

Заключение

На этом все. Как видите, тут нету ничего слишком сложного. Как упоминалось выше, это работает только в WebKit браузерах, но те, кто используют эти браузеры получат в виде бонуса весьма красивые элементы формы. В других браузерах свойства корректно деградируют. Мы используем внутренние отступы а не задаем ширину и высоту, что избавляет нас от весьма странной стилизации в Firefox при задании фиксированных размеров этим элементам формы.

Если вы хотите почитать о другом интересном и более кроссбраузерном способе стилизации чекбоксов, рекомендую вам почитать о стилизации с помощью спрайтов в статье «Стилизация чекбоксов».

Это интересно: «Красивая поисковая форма».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:

Ваш комментарий будет первым.