xandeadx.ru Блог музицирующего веб-девелопера

CSS → Стилизация checkbox-ов на чистом CSS

Опубликовано в

Когда дизайнер не может «выдать» нормальный дизайн, он начинает стилизовать стандартные контролы (c) @petrovnn

Ниже, пример стилизации чекбоксов под MacOS.

HTML:

<input type="checkbox" id="checkbox-id" /> <label for="checkbox-id">Some label</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 (применяется техника спрайтов).

Работает во всех современных браузерах.

Демо.

Добавлено 18.01.2004

Вариант с псевдоэлементом:

input[type="checkbox"] {
    position: absolute;
    left: -9999px;
}
input[type="checkbox"] + label:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(sprite.gif) no-repeat;
}
input[type="checkbox"]:checked + label:before {
    background-position: 0 -32px;
}
Написанное актуально для CSS3
Похожие записи

Комментарии RSS

В опере не работает

в опере это дело проверялось первым делом, работает отлично

Проблема в том, что не у всех современные браузеры. А у большинства заказчиков так вообще IE6 = корпоративный браузер, так что без скриптов не обойтись, как не крути. :(

P.S.: смайликов нет?

У меня опера 11.5 portable - не работает.

Тестил в опере, после первой загрузки страницы не заработало, F5 - все ок!
Попробовал в IE8 - не работает :(

не работает в IE7, 8

с каких пор IE7/8 стали современными браузерами?)

Реально не работает в Опере.
Версия: 11.51
Сборка: 1087
Платформа: Mac OS X
Система: 10.6.5

to xandeadx
ну 7 фиг с ним еще, а IE8 это максимум что ставится на winxp. 9-ый ставится только на 7ку.

Вероятно, Опера не только скрывает контрол, но и не дает по нему кликать. Кроме того, клик по соответсвующему лейблу также не приводит к нужному результату, а другие браузеры просто делают его невидимым, но кликать позволяют. В итоге "галка" в Опере не ставится и, соответственно, смены бекграунда не происходит.

Примечательно, что если сделать чекбокс видимым, то клик по лейблу вновь изменяет состояние соответствующего чекбокса.

Вместо

display: none; 

я сделал

left: -5000px;
position: absolute;

И в Опере все заработало.

Гера, спасибо, демку исправил.

отпишитесь те у кого не работало :)

В опере 11.5 portable теперь у меня заработало.

IE8 - не работает. Чекбокс чекается, но видимо он не понимает конструкцию input[type="checkbox"]:checked + label

Спасибо, крутой способ.

Vydrin_AP,
В IE8 не поддерживается псевдо-класс :checked. Для него можно через js вешать и снимать класс "checked".

А как вам такое применение?

Спасибо автору, мне очень помогло.

Но я вот, тоже напоролся на IE 8, причём сделал кучу чекбоксов по данной схеме и когда обнаружил, что в IE 8 они совершенно не работаю, чуть было не выпрыгнул из окна первого этажа:). Собирался уж всё переделывать.
Но, Ураа, ураа и ещё раз ураа. Решение случайным образом нашлось.
И помог мне в этот этот пост на хабре: http://habrahabr.ru/post/44686/
Если конкретнее, то спасло подключение библиотеки:

Хочу обратить ваше внимание, что под IE 8 я подключать библиотеку от девятого.
Теперь чекбоксы работаю и в IE 8, а я жив, здоров и в хорошем настроение, чего и вам желаю :)

lutidza, какой библиотеки?

Сорри, забыл вставить линк: https://code.google.com/p/ie7-js/
Я брал:

Я брал: IE9.js (Вырезался в предыдущем посте код :)

Спасибо, очень помогло, компенсировала кликами :)

Огромное-огромное спасибо, всё получилось просто супер)

Рекомендую интересный пример с использованием чекбоксов
Эффект наложения с появлением объектов в CSS3 / CSS checkbox

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании