Стилизация элементов checkbox на CSS

Очень часто сталкиваемся с такой ситуацией, что дизайнер решил изменить внешний вид чекбоксов. Здесь есть 2 подхода решения проблемы: первый с помощью CSS3 и второй, это использовать jQuery. Ниже приведен пример стилизации чекбокс с помощью css, работает в современных браузерах.

Пример:

Само изображение:

<input type="checkbox" id="depositonly" name="depositonly" value="Y" /> <label for="depositonly">Только сданные</label>

<style>
input[type="checkbox"] {
    position: absolute;
    left: -9999px;
}
input[type="checkbox"] + label {
    background: url(/html/img/i-checked.png) 0 0 no-repeat;
    padding-left: 30px;
}

input[type="checkbox"]:checked + label {
    background-position: 0 -24px;
}
</style>

Теги:

стилизация checkbox

Рубрики блога

Партнеры

всепохозяйству.рф