Когда дизайнер не может «выдать» нормальный дизайн, он начинает стилизовать стандартные контролы (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
Комментарии
В опере не работает
в опере это дело проверялось первым делом, работает отлично
Проблема в том, что не у всех современные браузеры. А у большинства заказчиков так вообще 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ку.
Вероятно, Опера не только скрывает контрол, но и не дает по нему кликать. Кроме того, клик по соответсвующему лейблу также не приводит к нужному результату, а другие браузеры просто делают его невидимым, но кликать позволяют. В итоге "галка" в Опере не ставится и, соответственно, смены бекграунда не происходит.
Примечательно, что если сделать чекбокс видимым, то клик по лейблу вновь изменяет состояние соответствующего чекбокса.
Вместо
я сделал
И в Опере все заработало.
Гера, спасибо, демку исправил.
отпишитесь те у кого не работало :)
В опере 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
Добавить комментарий