Как создать уникальные флажки

Как создать уникальные флажки

Проблема

Дизайнеры всегда хотят иметь полный контроль над всеми элементами веб-страницы. Когда графического дизайнера, имеющего ограниченный опыт работы с CSS, просят создать макет веб-сайта, он практически всегда создает макет с уникальными стилизованными элементами управления форм, чем вгоняет в тоску разработчика, задача которого — перевести этот рисунок на язык CSS.

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

По сей день большая часть браузеров допускает лишь минимальную их стилизацию или вообще не поддерживает стили для этих элементов форм. В результате разработчикам приходится либо мириться с их представлением по умолчанию, либо прибегать к ужасным трюкам, затрудняющим доступ к содержимому веб-страниц, таким как воссоздание этих элементов с помощью блоков  div и сценариев JavaScript.
Существует ли способ обойти подобные ограничения и настроить внешний вид флажков, не раздувая код и не жертвуя семантикой и доступностью содержимого?

как сделать уникальные чекбоксы

 

Решение

До недавнего времени решить эту задачу без помощи сценариев было невозможно. Однако в Selectors Level 3  мы получили новый псевдокласс:  :checked . Этот псевдокласс успешно проходит проверку на соответствие только в том случае, когда флажок отмечен — либо пользователем, либо посредством сценария.

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

Читайте также  Подсказки о прокрутке

Возможно, вы спрашиваете себя, стили каких других элементов мы можем захотеть менять в зависимости от того, отмечен флажок или нет. Что ж, существует тип элемента, демонстрирующий особое поведение в привязке к флажкам, и это  <label> .

Элемент <label> , связанный с флажком, также выполняет функцию переключателя для этого флажка. Поскольку метки (label), в отличие от флажков, не являются подменными элементами,  мы можем добавлять к ним генерируемое содержимое и настраивать их стили в зависимости от состояния флажков.

Таким образом, можно скрыть настоящие флажки, сделав это так, чтобы не нарушить порядок табуляции, и вместо этого заставить генерируемое содержимое играть роль стилизованных флажков! Давайте посмотрим на это решение в действии. Начнем со следующей простой разметки:
HTML
<input type=»checkbox» id=»awesome» />
<label for=»awesome»>Awesome!</label>

Из спецификации CSS 2.1: «[Подменный элемент — это] элемент, содержимое которого выходит за рамки модели форматирования CSS, например изображение, встраиваемый документ или апплет». К подменным элементам невозможно применять генерируемое содержимое, хотя некоторые браузеры и поддерживают такую функциональность.

СОВЕТ
Задаетесь вопросом, в чем отличие псевдокласса :checked от селектора по атрибутам [checked]? Последний не обновляется в результате взаимодействия с пользователем, так как взаимодействие с пользователем не способно повлиять на атрибут HTML.

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

input[type=»checkbox»] + label::before {
content: ‘\a0’; /* неразрывный пробел */
display: inline-block;
vertical-align: .2em;
width: .8em;
height: .8em;
margin-right: .2em;
border-radius: .2em;
background: silver;
text-indent: .15em;
line-height: .65;
}

На рисунке показано, как сейчас выглядят наш флажок и метка.

Читайте также  Как размыть фон на css

 

Оригинальный флажок все еще отображается на экране, но позднее мы скроем его. Теперь нам нужно создать другой стиль, который будет применяться к флажку, когда тот отмечен.Для начала хватит другого цвета и символа галочки в качестве содержимого:

input[type=»checkbox»]:checked + label::before {
content: ‘\2713’;
background: yellowgreen;
}

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

Это означает, что мы не можем использовать  display: none, поскольку в этом случае флажок полностью пропадет из порядка табуляции. Вместо этого применим следующий подход:
input[type=»checkbox»] {
position: absolute;
clip: rect(0,0,0,0);
}

Вот и всё! Мы сделали простейший уникальный флажок. Разумеется, мы могли бы продолжить совершенствовать его внешний вид: например, настроив разные стили для состояний, когда он находится в фокусе и когда он недоступен, как показано на рисунке:
input[type=»checkbox»]:focus + label::before {
box-shadow: 0 0 .1em .1em #58a;
}
input[type=»checkbox»]:disabled + label::before {
background: gray;
box-shadow: none;
color: #555;
}

 

Эти эффекты можно сделать еще привлекательнее, добавив переходы или анимации. Или же можно вообще пуститься во все тяжкие и создать какие-нибудь скевоморфные переключатели. Возможностям действительно нет предела!
ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/checkboxes

Переключаемые кнопки

Вариацию «трюка с флажком» можно использовать для имитации переключаемых кнопок, ведь в чистом HTML способа создавать подобные кнопки не предусмотрено. Переключаемые кнопки — это кнопки, работающие по принципу флажков: они включают или выключают настройку и выглядят нажатыми, когда настройка включена, или «отжатыми», когда настройка отключена.


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

Читайте также  Расширение области, реагирующей на щелчок мыши

input[type=»checkbox»] {
position: absolute;
clip: rect(0,0,0,0);
}
input[type=»checkbox»] + label {
display: inline-block;
padding: .3em .5em;
background: #ccc;
background-image: linear-gradient(#ddd,
#bbb);
border: 1px solid rgba(0,0,0,.2);
border-radius: .3em;
box-shadow: 0 1px white inset;
text-align: center;
text-shadow: 0 1px 1px white;
}
input[type=»checkbox»]:checked + label,
input[type=»checkbox»]:active + label {
box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
border-color: rgba(0,0,0,.3);
background: #bbb;
}

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

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/toggle-buttons

 

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: