Стилизация элементов формы

Давно собирался написать пост (упоминалось например здесь: JQuery - начало работы) о том как стилизовать элементы формы - наконец это свершилось. Как я уже говорил - без javascript здесь нам никак не обойтись - это тут необходимое зло. Итак, приступим.

Для начала рассмотрим как сделать стилизованный checkbox. Нам понадобится форма:

<form method="post" name="testForm" action=""</form>
Помимо формы нужен сам checkbox:
<input type="checkbox" name="service1" id="service1" value="1"> 

В результате имеем:

Это пока всем до боли знакомый checkbox - будем делать его краше. К флажку необходимо будет добавить label - иначе фокуса не получится.

<label for="service1" onclick="Check(1)" onmouseover="DoGrey(1)" onmouseout="DoWhite(1)">
</label>

Итак, сделали метку, к метке добавили обработчики событий. Вкратце зачем они нужны: onclick отвечает за действие при нажатии на флажке - он может не только менять стиль checbox, но и к примеру отправить форму - здесь все зависит только от того что Вы напишете в обработчике. onmouseover - указатель мыши на флажке, меняем ему стиль на промежуточный-некое серое среднее между выбрано и не выбрано. Можно его не задавать - в стандартном варианте событие не обрабатывается, но мы же делаем красиво, потому пусть оно будет.
Собственно обработчики:

function CheckUsluga(id){
               if (document.getElementById('service'+id).checked==false){
                  document.getElementById('flag'+id).style.backgroundPosition="-64px 0";                            
               }
               if (document.getElementById('service'+id).checked==true){
                  document.getElementById('flag'+id).style.backgroundPosition="0 0";
               }
                    }
function DoGrey(id){
                    if (document.getElementById('service'+id).checked==false){
                      document.getElementById('flag'+id).style.backgroundPosition="-32px 0";                        
                    }
                   }
function DoWhite(id) {
                   if (document.getElementById('service'+id).checked==false){
                            document.getElementById('flag'+id).style.backgroundPosition="0 0";
                   }
                   if (document.getElementById('service'+id).checked==true){
                            document.getElementById('flag'+id).style.backgroundPosition="-64px 0";
                        }
                   }
function MarkUsluga(id){
                        document.getElementById('flag'+id).style.backgroundPosition="-64px 0";
                   }
Прячем наш checkbox - т.к. не смотря на название поста стилизовать его не получится.
<div style="width: 0px; height:0px; overflow: hidden;">
<input type="checkbox" name="service1" id="service1" value="1">
</div>
Итак, к чему мы пришли - флажок спрятан, осталась только метка - и та у нас без текста. Начинаем стилизовать. Нам нужен... нет не клей, нам нужен рисунок стилизованный checkbox Это и будет наш стилизованный checkbox. Дело за малым - придать ему рабочую форму. Вкратце о рисунке - рисуем 3 положения стилизованного checkbox: отмечен, не отмечен, курсор над элементом. Обязательно делаем все 3 положения одним рисунком - иначе может получиться мерцание, что плохо выглядит. В чем суть - меняем checkbox обычным div, но прописываем ему стилями background - имеем иллюзию что это он, checkbox и есть.
Собственно стиль
.flazhok{
    float: left;
    position:relative;
    width: 32px;
    height: 32px;
    background: url("http://blogkodera.ru/images/stories/check_fon.gif") no-repeat;
    background-position:  0px 0px;
}
.flazhok label {
    display: block;
    height: 32px;
    width: 32px;
    cursor: pointer;
}
2й стиль-для метки. Рисунок у меня 32*32 - потому label сделан того же размера, если у вас получилось иначе - меняйте. В дальнейшем класс я с Вашего позволения уберу - запишу стиль в сам элемент для удобства написания статьи.

Отметь меня!

Собственно, результат выше. сама форма:

<form method="post" name="Form1" action="">
<div style="width: 0px; height:0px; overflow: hidden;">
<input type="checkbox" name="service5" id="service5" value="1">
</div>
<div id="flag5" style="
    float: left;
    position:relative;
    width: 32px;
    height: 32px;
    background: url('http://blogkodera.ru/images/stories/check_fon.gif') no-repeat;
    background-position:  0px 0px;
">
<label for="service5" onclick="Check(5)" onmouseover="DoGrey(5)" onmouseout="DoWhite(5)" style="display: block;
    height: 32px;    width: 32px;     cursor: pointer;"></label> 
</div>Отметь меня!
</form>
Собственно, в чем суть стилизации элементов формы: все они как правило очень трудно стилизуются через css, если вообще стилизуются. Здесь на примере стилизации checkbox показан путь обхода этой ситуации - присваиваем самому элементу нулевые размеры, рисуем картинку для баграунда и с помощью javascript меняем стили, ну и само положение переключателя - т.е. несмотря на нулевые размеры он участвует в работе и отправляется с формой как обычно. С функциями я думаю все понятно - первые три работают с мышью. 4-я "MarkUsluga" может быть применена если ваша форма имеет по-умолчанию отмеченные поля, тогда проверяя их значения, можно на стадии инициализации изменить вид checkbox вызвав MarkUsluga(id). В случае с одним checkbox применять числовые id смысла нет - но у меня был случай с 5ю "input type="checkbox"" - потому все функции в том виде, в котором они пригодны для использования с несколькими элементами формы. Использование одного баграунда применяется не только для стилизации элементов формы, но и практически везде, где может понадобиться поменять вид отображения. Если два вида находятся в разных файлах, то в процессе загрузки получится белый фон, что вызывает эффект мерцания.

Ну и напоследок скажу что есть прекрасный плагин для JQuery, называется он prettyCheckboxes - который может облегчить задачу стилизации элементов формы.