Нестандартные Checkbox (RadioButton) без использования JavaScript

29 Сен
2011

К данному решению пришел не сразу, способ реализации был третьим по счёту за 1,5 месяца разработки проекта и, как мне кажется, вполне достойным внимания. Основная фишка в том, что для реализации вообще не используется JavaScript. Начнём. Есть картинка image, которую необходимо прикрутить на checkbox’ы. Размер: 42px x 91px Размер в данном случае играет не последнее значение, потому что все стили будут изменяться исходя из размеров картинки. Стиль контейнера для элемента с Checkbox с выстраиванием в строчку этих элементов. Стоит обратить внимание на height, высота контейнера должна учитывать особенности картинки, при большем чем нужно значении, будет видно оба элемента картинки, а при меньшем значении, элементы могут обрезаться.
.check-element {
 float: left;
 position: relative;
 width: 240px;
 height: 61px;
 padding-top: 15px;
}
Скрываем браузерный checkbox:
.checkbox {
 float: left;
 display: none;
}
Стили для label, в котором и лежит картинка:
.check-label {
 position: absolute;
 color: #333333;
 cursor: pointer;
 padding-top: 13px;
 padding-left: 40px;
 background: url(checkbox.png) no-repeat 0px 0px;
}
.checkbox:checked + .check-label {
 color: #d90000;
 background: url(checkbox.png) no-repeat 0 -43px;
}
Код для вывода элемента: CodeExample Вместе с нестандартными Checkbox решилась и ещё одна задача, смена цвета текста при выборе нужного элемента (также встречал решение данного вопроса с помощью больших и страшных JavaScript) По данному вопросу всё. Тут можно скачать архив с примером того, что написано выше. P.S. Данное решение также работает и для RadioButton.
----
Далее небольшой Bonus, кому-то может пригодиться: В нашем проекте, разработанном в ASP.NET MVC 3, возникла необходимость сделать одиночную кнопку с определёнными функциями видимости при положении checked. Реализация вопроса дала код с такой структурой: CodeBonus В такой структуре Checkbox перестали работать, так как у нас в стилях было задано: .checkbox:checked + .check-label, а это значит что должен идти сразу за тем элементом, на который нажимаем. Решение нашлось в CSS без проблем (вместо «input» можно использовать и другие элементы при необходимости):
.checkbox:checked + input + .check-label {
 color: #d90000;
 background: url(images/checkbox.png) no-repeat 0px -43px;
}
Но webkit-браузеры (Chrome и Safari) не понимают такой структуры CSS, пришлось искать заплатку, помог CSS-Tricks. Не знаю как это работает, но работает, вот код, который нужно вставить в CSS:
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
Внимание! Метод не работает в IE8 и ниже, в нашем проекте решили не ориентироваться на эти браузеры, по крайней мере на этапе Бета. Спасибо за внимание.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх