В наше время использовать JavaScript для украшения разного рода input полей уже считается плохим тоном. Современные HTML5 и CSS3 дают широчайшие возможности в этом плане. Например, легко можно реализовать свой собственный чекбокс с любым дизайном.
Пример давно был найден на просторах Интернета но в то время он работал только в одном браузере "корпорации Добра". Теперь же он прекрасно работает во всех браузерах (не считаю умирающих, древних ИЕ).
Нам понадобится подготовленные изображения самого чекбокса (сделаем sprite из них) . На примере показана стилизация чекбоксов под MacOS.
HTML:
<input type="checkbox" id="checkbox-id" />
<label for="checkbox-id">
Название
</label>
CSS:
input[type="checkbox"] {
position: absolute;
left: -9999px;
}
input[type="checkbox"] + label {
background: url(sprite.gif) 0 0 no-repeat;
padding-left: 20px;
}
input[type="checkbox"]:checked + label {
background-position: 0 -32px;
}
Первым правилом прячем настоящий чекбокс.
Вторым, добавляем для соседнего лэйбла фон с нарисованным чекбоксом.
Третьим правилом меняем фон лэйбла если чекбокс к которому он привязан находится в состоянии checked