Как средствами CSS изменить цвет фона (background-color) и рамки (border) у элементов radio button или checkbox?
Средствами только CSS получить универсальное кросс-браузерное решение, наверное, не получится. Однако с помощью Javascript можно получить вообще любой вид radio button или checkbox.
Рассмотрим на примере checkbox'а. Суть приема сводится к тому, что непосредственно checkbox находится в невидимом div'е, а "клики" обрабатываются с помощью картинки (Javascript).
Javascript:
<script language="Javascript"><!--
var checked = new Image();
var unchecked = new Image();
checked.src = 'checked.gif';
unchecked.src = 'unchecked.gif';
function SwitchImage() {
if (document.getElementById('my_check').checked == true) {
document.getElementById('my_check').checked = false;
document['check_image'].src = unchecked.src;
} else {
document.getElementById('my_check').checked = true;
document['check_image'].src = checked.src;
}
}
--></script>
HTML:
<div style="display: none;">
<input type="checkbox" name="ch" id="my_check" value="1">
</div>
<img src="unchecked.gif" name="check_image" onClick="SwitchImage();">
Оглавление
| На верх
Версия для печати
Скачать статью