Ставим один стиль для чекбоксов

Я давно уже использую данный метод, но никогда ещё о нём не писал у себя в блоге. Мне не нравится когда элементы форм в разных браузерах смотрятся по разному, поэтому и решил разобраться :)

input[type="checkbox"] {
    position:absolute;
    clip: rect(0,0,0,0);
    clip: rect(0 0 0 0);
}
 
input[type="checkbox"] + label::before {
    content: url('checkbox.png');
}
 
input[type="checkbox"]:checked + label::before {
    content: url('checkbox-checked.png');
}

Данный пример во многом упрощает работу, не надо использовать какие-либо скрипты — всё очень просто.

Некоторые из старых версий браузеров могут игнорировать псевдоклассы, ну и к чёрту их. Будь разумным и продвинутым — ставь современный браузер :)