Оформление нестандартного input radio

20.11.2012

Кто сталкивается с задачей оформить нестандартный input radio, то вот я приготовил простое решение без всяких Jquery и т.п. Все делается обычным CSS и картинкой

Стили

  1. <style type="text/css">
  2. <!--
  3. body:not(#Foo) label
  4. {padding:2px 0px 2px 20px;}
  5. body:not(#Foo) input[type=radio]
  6. {display:none;}
  7. body:not(#Foo) input[type=radio] + label
  8. {background: url(/otziv/off.png) no-repeat 0px 0px;}
  9. body:not(#Foo) input[type=radio]:checked + label
  10. {background:url(/otziv/on.png) no-repeat 0px 0px;}
  11. </style>

Форма

форма будет выглядеть немного измененной, добавится тег <Label>.

 

  1. <form method="post" >
  2. Настроение:<br/>
  3. <input type='radio' name='service' value='bad' size="5" id='Choice1'><label for="Choice1">плохо</label><Br>
  4. <input type='radio' name='service' value='normal' id='Choice2'><label for="Choice2">так себе</label> <Br>
  5. <input type='radio' name='service' value='good' id='Choice3'><label for="Choice3">хорошо</label><Br>
  6. <input type='radio' name='service' value='best' id='Choice4'><label for="Choice4">лучше всех</label><Br>
  7. </p>
  8. <input type='submit' value='Отправить форму' /></p>
  9. </form>

 

 

Картинки 

Для стилизации input radio нужно будет две картинки, одна для выделенного инпута, а другая для не выделенного инпута.

Включен: | Выключен:

 

Файл

 

Кому интересно увидеть в действии, можно протестировать input radio



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

Добавить комментарий


Защитный код
Обновить