Привет всем! Хочу изменить стиль INPUT TYPE='radio'. Сделал с помощью CSS:

input{
 background-image: url(radio.gif);
 height: 16px;
 width: 16px;
 -webkit-appearance: none;
}
input:hover{
 cursor:pointer;
}
input:checked{
 background-image: url(radio2.gif);
 height: 16px;
 width: 16px;
}

Но проблема в том, что не во всех браузерах это работает. Как мне реализовать это на JavaScript и стоит ли это вообще делать (изменять стиль)?
Спасибо за ответ.

_____________
Одесса - мой город!)))

Может вы искали это.

css:

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

body:not(#Foo) input[type=radio] + label
  {background:url(images/n.png) no-repeat 0px 0px;}

body:not(#Foo) input[type=radio]:checked + label
  {background:url(images/y.png) no-repeat 0px 0px;}

Где: n.png, y.png -картинки выбор/ невыбор
Соответственно в html-е:

Выберете пол:
<input checked type='radio' id='Choice1' name='Choice' value="1">
<label for='Choice1'>Женский</label>
 <input type='radio' id='Choice2' name='Choice' value="2">
 <label for='Choice2'>Мужской</label>

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

body:not(#Foo) input[type=radio] + label
  {background:url(images/n.png) no-repeat 0px 0px;}

body:not(#Foo) input[type=radio]:checked + label
  {background:url(images/y.png) no-repeat 0px 0px;}

Выберете пол:
<input checked type='radio' id='Choice1' name='Choice' value="1">
<label for='Choice1'>Женский</label>
 <input type='radio' id='Choice2' name='Choice' value="2">
 <label for='Choice2'>Мужской</label>

Так ничего нельзя сделать?

_____________
Одесса - мой город!)))