Пример оформления checkbox на чистом CSS

В наше время использовать 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


Другие публикации:



Написать комментарий через:

 
               
  • Локальный блог
  •  
 

Ваш отзыв

Имя *

Почта (скрыта) *

Сайт

Напишите цифрами двa вoceмь двa *

Сообщение

 
Статусы для соц.сетей на ArtKiev Design Studio