Изменить внешний вид input type=radio или checkbox без js

На днях, делая верстку столкнулся с тем, что нужно было заменить стандартный вид тега input radio на свои картинки.

Сразу говорю, это работает в IE только с 9й версии. Так что кому-то может не подойти. Впрочем, это может быть исправлено применением для IE свойства behavior.


Для начала нужно немного переделать стандарный HTML код:

 <input type='radio' id='Choice1' name='Choice'>
 <label for='Choice1'>Первый выбор</label><br>

 <input type='radio' id='Choice2' name='Choice'>
 <label for='Choice2'>Второй выбор</label><br>

 <input type='radio' id='Choice3' name='Choice'>
 <label for='Choice3'>Третий выбор</label><br>

 <input type='radio' id='Choice4' name='Choice'>
 <label for='Choice4'>Четвертый выбор</label><br>

Затем в CSS пишем:

body:not(#Foo) label
  {padding:2px 0px 2px 20px;}

body:not(#Foo) input[type=radio]
  {display:none;}

body:not(#Foo) input[type=radio] + label
  {background:url({выключенная кнопка}) no-repeat 0px 0px;}

body:not(#Foo) input[type=radio]:checked + label
  {background:url({включенная кнопка}) no-repeat 0px 0px;}

Как это работает?

1. Во-первых, в HTML существует специальный элемент «label», который можно назначить любому элементу формы, и щелчок по которому будет соответствовать щелчку по элементу формы.

2. Во-вторых, в CSS2.1 есть специальный псевдокласс :checked, применяемый только к отмеченным элементам radio и checkbox. Что важно – это динамический псевдокласс. То есть установка или сброс элементов radio или checkbox повлекут применение или отмену применения правил с этим псевдоклассом.

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

Наш рецепт совмещает все эти три факта. Мы прячем (при помощи свойства display) реальный элемент radio и назначаем этому спрятанному элементу элемент label. После этого, при помощи сестринского селектора создаем несколько правил оформления элемента label. А в качестве первого селектора в сестринском селекторе используем селектор для radio элемента в разных его состояниях.

ПРИМЕР РАБОТЫ:

Спасибо за помощь этому сайту.

Поделиться с друзьями

Френдинг

 

Comments: 4

Leave a reply »

 
 
 

CSS селекторы типа :not, :first, :even, :odd, :last и т.д. не работают в ИЕ.

Есть плагин JS – selectivizr, для работы с CSS слекторами.

А вообще можно оформлять чекбоксы и прочее так:

Сам чекбокс делать с opacity:0 (в ИЕ нужно прописать alpha фильтер), а оформлять label для этого чекбокса, который кладется под него. И в css оформление делать через .customCheckbox['checked="checked"'] label {background …… }

 

Не работает в IE < 9. Но в 9 уже ок. через годик-два ранние версии отомрут – хотелось бы.

 

Да, у IE трабл с передачей клика с label на чекбокс, у которого display:none – не отмечается.
Сталкивался несколько раз.

 

Рекомендую интересный пример с использованием чекбоксов http://siteacademy.ru/index.php/css/39-css/annotation-overlay-effect

 

Leave a Reply

 
(will not be published)
 
 
Comment