У нас возникли идеи, как улучшить переключатели, о которых мы рассказали в уроке «Создание переключателя с использованием CSS3». Мы поставили перед собой следующие вопросы. Как применить переключение к радиокнопкам? Как повысить удобство? Почему переключатели не работают в старых версиях мобильных браузеров на движке Webkit?

Мы внесли изменения, так что посмотрите демонстрацию работы и исходный код.

Поддержка радиокнопок 

Простая задача для начала. Радиокнопки работают почти так же, как переключатели-флажки, так что мы можем просто добавить класс switch (переключатель) каждому полю ввода, чтобы   все заработало, например:

<div>
<input type="radio" id="radio1" name="radio" class="switch" />
<label for="radio1">first radio button</label>
</div>

<div>
<input type="radio" id="radio2" name="radio" class="switch" checked="checked" />
<label for="radio2">second radio button</label>
</div>
<div>
<input type="radio" id="radio3" name="radio" class="switch" />
<label for="radio3">third radio button</label>
</div>

Очень приятно посмотреть, как два переключателя меняют положение одновременно.

Улучшенное удобство 

Также были подняты несколько вопросов. Раньше переключатели менялись от красного к зеленому, так что дальтоникам могло быть сложно определить, включен или выключен переключатель. Чтобы решить эту проблему, мы добавили символы крестик и галочку на фон:

Дополнительных элементов не потребовалось, мы просто использовали символ крестик вместо пробела и расположили его справа на фоне, используя свойство text-indent:

input.switch:empty ~ label:before
{
	content: '2718';
	text-indent: 2.4em;
	color: #900;
}

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

input.switch:checked ~ label:before
{
  content: '2714';
  text-indent: 0.5em;
  color: #6f6;
}

Работающая во всех браузерах анимация CSS3

Изначально мы разместили символы галочку и крестик на белой части переключателя. Это непростая задача для браузеров, так как им нужно создать переход между двумя символами. В браузере Firefox все отработало правильно, а браузеры Chrome и Internet Explorer 10 пошли по легкому пути: вообще не воспроизводили анимацию. Оказалось, что движки Webkit и Trident не разрешают анимацию псевдо-элементов, чье содержимое меняется, даже если однозначно указать, что только внешний отступ или цвет должны анимироваться.

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

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

input.switch:focus ~ label
{
  color: #000;
}
input.switch:focus ~ label:before
{
  box-shadow: 0 0 0 3px #999;
}

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

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

Другие проблемы движка Webkit 

Последняя проблема: переключатель не работает в мобильных браузерах на старых версиях движка Webkit, таких как Safari на iPad 1.0 и старые версии браузеров на устройствах Android, а также в старых версиях Safari. Движок поддерживает подписи, селекторы :checkbox и показывает начальное состояние, но не работает с псевдо-элементами после первой загрузки страницы. Мы даже попробовали добавить немного JavaScript, но ничего не изменилось.

Только недавно в движок Webkit была добавлена анимация псевдо-элементов. Это неприятно, и в отличие от старых версий браузера Internet Explorer, таких как 6 и 7, сложно найти обходной путь, который бы не сказался на других браузерах.

Полагая, что пользователи браузеров на старых версиях движка Webkit не являются частью Вашей аудитории, вы можете использовать код HTML и CSS, как пожелаете. В противном случае Вам понадобится изменить структуру, добавив элементы вместо псевдо-элементов или код JavaScript, чтобы все работало.

Автор урока Craig Buckler

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

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

• Стилизация полосы прокрутки HTML5 для разных браузеров
• Интересная скользящая форма с использованием jQuery
• Создание анимированной гистограммы с использованием CSS3