чекбокс для всех чекбоксов

HTML 5CSS 2.1CSS 3IE 6IE 7IE 8Cr 5Op 10Sa 5Fx 3.6

Пример 1. Изменение вида чекбокса

Свойство appearance изменяет внешний вид элемента интерфейса, при сохранении его функции. Если задать значение none, то чекбокс пропадет, но по нему, тем не менее, можно щелкать и состояние чекбокса будет меняться. Чтобы отследить это состояние я воспользуюсь псевдоклассом :checked. Изменив также курсор мыши при наведении на чекбокс, в итоге получил следующий код (пример 1).

Верхнее изображение будет использоваться для флажков без галочки, а нижнее  с галочкой. Простое добавление фонового рисунка через свойство background, как отмечалось выше, ничего не даст. Необходимо отключить чекбокс, оставив при этом его функциональность. Это делается свойством CSS 3 appearance, которое, как вы уже догадались, не поддерживается пока ни одним браузером. Зато есть не входящие в спецификацию CSS -webkit-appearance и -moz-appearance, эти свойства, соответственно, работают в Safari (Chrome) и Firefox.

Рис. 1. Вид будущего чекбокса

Для начала мне понадобится два рисунка чекбокса в разных состояниях. Для быстрой загрузки их желательно объединить в один, как показано на рис. 1.

Флажком, или на жаргоне разработчиков чекбоксом, называется элемент <input type="checkbox >, который создает поле для проставления галочки. Это поле имеет два состояния  отмечена галочка или нет  и во всех браузерах выглядит практически идентично, поскольку чекбоксы зависят от операционной системы. По этой причине стилизовать этот элемент довольно трудно, например, фоновый рисунок отображается только в браузерах IE и Opera. При этом результат выглядит настолько нелепо, что добавлять какие-либо стили отпадает всякое желание. Имитировать работу чекбокса можно конечно с помощью скриптов, используя стандартный элемент вроде <span>, его как раз стилями легко превратить во что угодно. Однако не будем искать простых путей и сделаем все красиво через CSS 3, пусть это даже работает только в Safari и Chrome.

Опубликовано: 01.10.2010Влад Мержевич

Стильные чекбоксы не для всех

Универсальное свойство позволяет установить одновременно до пяти характеристик фона. Задает начальное положение фонового изображения, установленного с помощью свойства background-image. Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров. Применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение «включено»

Последние записи

htmlbook.ru - Стильные чекбоксы не для всех