К данному решению пришел не сразу, способ реализации был третьим по счёту, как мне кажется, вполне достойным внимания.
Основная фишка в том, что для реализации вообще не используется JavaScript.
Внимание! Метод не работает в IE8 и ниже, в нашем проекте решили не ориентироваться на эти браузеры, по крайней мере на этапе Бета.
Начнём
Есть картинка, которую необходимо прикрутить на checkbox’ы.
Размер в данном случае играет не последнее значение, потому что все стили будут изменяться исходя из размеров картинки.
Стиль контейнера для элемента с Checkbox с выстраиванием в строчку этих элементов. Стоит обратить внимание на height, высота контейнера должна учитывать особенности картинки, при большем чем нужно значении, будет видно оба элемента картинки, а при меньшем значении, элементы могут обрезаться.
.check-element {
width: 56px;
height: 28px;
padding-top: 5px;
}
Скрываем браузерный checkbox:
.checkbox {
display: none;
}
Стили для label, в котором и лежит картинка:
.check-label {
cursor: pointer;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 68px;
background: url('/img/checkbox-sprite.png') no-repeat 0px 0px;
vertical-align: middle;
}
.checkbox:checked + .check-label {
color: #25c3ff;
text-shadow: 0px 1px 5px #25c3ff;
background: url('/img/checkbox-sprite.png') no-repeat 0 -28px;
}
Checkbox
Код для вывода элемента:
<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)
RadioButton
Данное решение также работает и для RadioButton.
Код для вывода элемента:
<p class="check-element">
<input type="radio" class="checkbox" id="my-checkbox4" name="check" />
<label class="check-label" for="my-checkbox4">Check4</label>
</p>
<p class="check-element">
<input type="radio" class="checkbox" id="my-checkbox5" name="check" />
<label class="check-label" for="my-checkbox5">Check5</label>
</p>
<p class="check-element">
<input type="radio" class="checkbox" id="my-checkbox6" name="check" />
<label class="check-label" for="my-checkbox6">Check6</label>
</p>
Пример:
Так как я занимаюсь разработкой сайтов на www.umi-cms.ru, хочу сразу привести примеры для файлов выводящих нестандартные Checkbox и RadioButton:
Checkbox
В файле /tpls/data/reflection/webforms.tpl (либо ваш шаблон вывода формы)
$FORMS['reflection_field_boolean'] = <<<END
<tr>
<td style="width:100%;">
<h7 style="width:100%;" class="check-element">
<input type="hidden" id="%input_name%" name="%input_name%" value="%value%" />
<input onclick="javascript:document.getElementById('%input_name%').value = this.checked;" type="checkbox" class="checkbox" id="my-checkboxНестандартные Checkbox (RadioButton) без использования JavaScript" %checked% name="check" />
<label class="check-label" for="my-checkboxНестандартные Checkbox (RadioButton) без использования JavaScript">Нестандартные Checkbox (RadioButton) без использования JavaScript</label>
</h7>
</td>
</tr>
END;
RadioButton
В файле /tpls/vote/default.tpl (либо ваш шаблон вывода формы)
$FORMS['vote_block_line'] = <<<END
<p>
<input type="radio" name="vote_results" value="%item_id%" class="search" id="vote_item_%item_id%">
<span umi:object-id="0" umi:field-name="name">%item_name%</span>
</p>
END;
