Mihalytch personal blog

Работая над последним проектом, возникла надобность изменить вид элементов формы: checkbox и select. Так как велосипед изобретать мне не свойственно, я решил почитать немного умных мыслей, посоветоваться с духами в он-лайне. Потратив пару часов своего времени, я нашел следущее решение. Для начала качаем скрипты: mootools, demo-moo

Затем пишем в таблице стилей следующий код, отвечающий за оформление чекбоксов:

.f_checkbox {
background-repeat:no-repeat;
background-position:0px center;
height:16px;display:block;
cursor:pointer;
cursor:hand;
width:20px;
height:20px;
}

.checked,.selected{
color:#ddd;
}

.f_checkbox{
padding:0px;
background-color:#ccc;
}

.unchecked{
background-image:url('img/checkbox_off.gif');
}

.checked{
background-image:url('img/checkbox_on.gif');
}

В коде страницы делаем следующую запись:

<!-- один из оформляемых чекбоксов -->
<label class="f_checkbox"><input type="checkbox" /></label>;
<!-- подключаем скачанные java-скрипты -->
<script type='text/javascript' src='mootools.js'></script>
<script type='text/javascript' src='demo-moo.js'></script>;

checkbox_on.gif и checkbox_off.gif изображения выбранного и не выбранного checkbox`а.

Теперь остается только экспериментировать =)