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

18 сентября 2011 г.

К данному решению пришел не сразу, способ реализации был третьим по счёту за 1,5 месяца разработки проекта и, как мне кажется, вполне достойным внимания.

Основная фишка в том, что для реализации вообще не используется JavaScript.

Начнём.

Есть картинка, которую необходимо прикрутить на checkbox’ы.
RadioButton
Размер: 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;
}

Код для вывода элемента:

<p class="check-element">
	<input type="checkbox" class="checkbox" id="my-checkbox1" name="check" />
	<label class="check-label" for="my-checkbox1">Check1</label>
</p>
<p class="check-element">
	<input type="checkbox" class="checkbox" id="my-checkbox2" name="check" />
	<label class="check-label" for="my-checkbox2">Check2</label>
</p>
<p class="check-element">
	<input type="checkbox" class="checkbox" id="my-checkbox3" name="check" />
	<label class="check-label" for="my-checkbox3">Check3</label>
</p>

Вместе с нестандартными Checkbox решилась и ещё одна задача, смена цвета текста при выборе нужного элемента (также встречал решение данного вопроса с помощью больших и страшных JavaScript)

По данному вопросу всё. Тут можно скачать архив с примером того, что написано выше.

P.S. Данное решение также работает и для RadioButton.

Далее небольшой Bonus, кому-то может пригодиться:

В нашем проекте, разработанном в ASP.NET MVC 3, возникла необходимость сделать одиночную кнопку с определёнными функциями видимости при положении checked.

Реализация вопроса дала код с такой структурой:

	<input class="checkbox" type="checkbox" id="IsPublic" name="IsPublic" value="true"/>
	<input type="hidden" name="IsPublic" value="false"/>
	<label class="check-label" for="IsPublic">Показывать эту информацию?</label>

В такой структуре 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 и ниже, в нашем проекте решили не ориентироваться на эти браузеры, по крайней мере на этапе Бета.

Теги:
рубрика Сайтостроение