Наверняка многие знают, что такие элементы формы как select, file, checkbox, radio не поддаются стилизации средствами CSS. Но как же быть, если нерадивый дизайнер в макете дизайна нарисовал поле checkbox в форме стилизировным под общий дизайн сайт, а заказчик на отрез не хочет принимать дизайн без формы ввода данных идентичной макету дизайна.
Вот здесь и пригодиться описанный ниже метод. Суть метода состоит в том, что элемент checkbox делается невидимым, но невидимым не простым присвоением display:none, а через свойство opacity:0
Таким образом, элемент находиться на странице, остается кликабельным, но полностью прозрачный, таким образом, невидимый. А в блоке, в котором находиться checkbox задается бекграунд с картинкой, на которой изображено, как должен выглядеть измененный checkbox и при клике на checkbox скриптом у блока меняется класс стиля, чтоб поменялся бекграунд на картинку с измененным чекбоксом в другом состоянии.
/*---------- Стили классов -----------*/input {margin:0;padding:0;opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}.checkboxOn {background:url(f_logincheckbox_on.png) no-repeat 0 3px;}.checkboxOff {background:url(f_logincheckbox_off.png) no-repeat 0 3px;}
/*---------- JS Скрипт изменения класса-----------*/function logincheckboxCheck () { if (document.getElementById("checkbox1").checked) { document.getElementById("checkboxDiv").className="checkboxOn"; } else { document.getElementById("checkboxDiv").className="checkboxOff"; }}
/*---------- Верстка-----------*/<div id="checkboxDiv" class="checkboxOn"> <input type="checkbox" id="checkbox1" onclick="logincheckboxCheck();" class="checkboxOn" checked="checked"/> <label for="checkbox1">Запомнить меня</label></div>
