Приветствую!
Пытаюсь переопределить стили для штатных чекбоксов и радио без JS
Собственно
ссылка на форму.
Собственно каким образом скрыть сам чекбокс, подозревая что бекграунд отображаеться, но его перекрывает сам чекбокс
И еще, что с кроссбраузерностью у данного варианта.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
</SCRIPT>
<STYLE type="text/css">
form{
}
.label{
float: left;
margin: 0 0 0 10px;
width: 157px;
height: 122px;
background: #f7f7f7;
padding: 3px;
position: relative;
}
label input[type="radio"]{
background: url(./Images/form-sprite.png) no-repeat 0 -9999px;
width: 21px;
height: 21px;
float: left;
/*opacity:0;*/
/*list-style: none;*/
position: relative;
z-index: 1;
}
label input[type="radio"]{
background-position: 100% 0;
z-index: 1000;
}
label input:checked[type="radio"]{
background-position: 0 0;
z-index: 1000;
}
</STYLE>
<FORM>
<LABEL class="label" for="visa">
<INPUT type="radio" name="pay" id="visa" class="" checked />
</LABEL>
<LABEL class="label" for="qiwi">
<INPUT type="radio" name="pay" id="qiwi" class="" />
</LABEL>
<LABEL class="label" for="webmoney">
<INPUT type="radio" name="pay" id="webmoney" class="" />
</LABEL>
</FORM>
</BODY>
</HTML>