Стильная анимация checkbox CSS3 transition и jQuery просто

Недавно возникла потребность стилизовать input checkbox с помощью CSS3 и jQuery. Это достаточно интересная и своеобразная тема, вы наверняка в курсе, что программный стиль элемента <input type="checkbox"> не только различается в разных браузерах, но и плохо поддаётся стилизации. К требованиям я отнёс максимальную простоту решения и возможность анимировать переключение.

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

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

Пример

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

С чего начать оформление checkbox?

Рассмотрим типичную форму для понимания и подумаем как нам поступить, затратив минимум усилий и сделав всё максимально классно. Для наглядности я оставил только интересующие нас элементы.

<form>
 <input type="checkbox" value="option" />
 <input type="checkbox" value="option" />
 <input type="checkbox" value="option" />
</form>

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

Существует такой тег label, который предназначен для связывания с любым input посредством атрибута for. При этом for должен указывать на id input. Такая связка позволяет переключать состояние checkbox или radio просто кликая по соответствующей метке.

<label for="check1">Option 1 <input id="check1" type="checkbox" /></label>

Вот пример такой связки. Но также хорошо подходит и вариант без оборачивания. Представленная ниже конструкция работает великолепно.

<label for="check1">Option 1</label>  
<input id="check1" type="checkbox" />

Теперь у нас есть элемент который заменит собой checkbox. Добавим несколько CSS классов и стилей, они нам понадобятся.

<label class="opt effect1" for="check1">Option 1 
 <input id="check1" type="checkbox" />
</label>

Класс «opt» отвечает за статичный стиль, класс «effect1» служит селектором для «:hover». Далее мы скроем checkbox и выкинем их со страницы от глаз подальше.

form input[type="checkbox"] {
position: relative;
left: -9999px;
height: 0;
border: 0; 
width: 0;
}

Опишем стиль для label в разных состояниях. Один class мы будем использовать для заморозки положения фона по клику.

form label {
background: transparent url('sprite.png');
border: 1px solid #eee8aa;
display: inline-block;
text-indent: -9999px;
border-radius: 6px;
margin: 4px 6px; 
cursor: pointer;
height: 60px;
width: 60px;
}
 
/* -[animation options on hover]- */
label.opt:hover {
border-radius: 4px;
box-shadow: inset 0 0 5px 3px #da70d6, 0 0 8px #444;  
transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
}
 
 
/* every label have different class */
label.effect1:hover {
background-position: 0 -54px;
}
 
/* action freeze class */
label.act {
  background-position: 0 -207px !important;
  transition: all .5s ease-in;
  -o-transition: all .5s ease-in;
  -moz-transition: all .5s ease-in;
  -webkit-transition: all .5s ease-in; 
}

Готово! Теперь при наведении на label background будет плавно прокручиваться к указанному положению. Таким образом мы можем указать уникальное положение изображения для каждого background checkbox. Но нам не достаёт функции заморозки положения, чтобы фон не откручивался в исходное положение по выборке опции. Для этого возьмём jQuery и напишем простенький snippet.

$(function(){
 
// onclick set & unset freeze class to stop background position 
$('.opt').toggle(
  function() {
    $(this).addClass('act').delay(200);   // set class
  },
  function() {
    $(this).removeClass('act').delay(200); // unset class
  }
);
 
}); 

Обрабатывая 2 клика мы устанавливаем класс или убираем его, за счёт этого достигается анимация.

Резюме

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

О том как достичь кроссбраузерности можно почитать в соответствующей заметке о CSS3 в Internet Explorer