 |
Категория: 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 браузерах мы получим вот такие чекбоксы:
Переключатели
Стилизация переключателей не сильно отличается от стилизации чекбоксов. Просто мы будем использовать сильное скругление элемента для создания круга, а для создания эффекта выбранного переключателя мы вместо текста будем использовать обычный элемент.
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 браузерах, но те, кто используют эти браузеры получат в виде бонуса весьма красивые элементы формы. В других браузерах свойства корректно деградируют. Мы используем внутренние отступы а не задаем ширину и высоту, что избавляет нас от весьма странной стилизации в Firefox при задании фиксированных размеров этим элементам формы.
Если вы хотите почитать о другом интересном и более кроссбраузерном способе стилизации чекбоксов, рекомендую вам почитать о стилизации с помощью спрайтов в статье «Стилизация чекбоксов».
Это интересно: «Красивая поисковая форма».
Ваш комментарий будет первым.