Наверняка многие знают, что такие элементы формы как select, file, checkbox, radio не поддаются стилизации средствами CSS. Но как же быть, если нерадивый дизайнер в макете дизайна нарисовал поле checkbox в форме стилизировным под общий дизайн сайт, а заказчик на отрез не хочет принимать дизайн без формы ввода данных идентичной макету дизайна.
Вот здесь и пригодиться описанный ниже метод. Суть метода состоит в том, что элемент checkbox делается невидимым, но невидимым не простым присвоением display:none, а через свойство opacity:0
Таким образом, элемент находиться на странице, остается кликабельным, но полностью прозрачный, таким образом, невидимый. А в блоке, в котором находиться checkbox задается бекграунд с картинкой, на которой изображено, как должен выглядеть измененный checkbox и при клике на checkbox скриптом у блока меняется класс стиля, чтоб поменялся бекграунд на картинку с измененным чекбоксом в другом состоянии.
Code
/*---------- Стили классов -----------*/
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;
}
Code
/*---------- JS Скрипт изменения класса-----------*/
function logincheckboxCheck () {
if (document.getElementById("checkbox1").checked) {
document.getElementById("checkboxDiv").className="checkboxOn";
}
else {
document.getElementById("checkboxDiv").className="checkboxOff";
}
}
Code
/*---------- Верстка-----------*/
<div id="checkboxDiv" class="checkboxOn">
<input type="checkbox" id="checkbox1" onclick="logincheckboxCheck();" class="checkboxOn" checked="checked"/> <label for="checkbox1">Запомнить меня</label>
</div>
Сайт
Форум
Фотоальбом
Настройки
Расширенный поиск
Лента новостей
05.06.2010, Суббота в 22:32
