Так все работает, хочу сделать чтобы каждая радио кнопка была со своей картинкой
<style>
.CheckBoxClass,.RadioClass{
display: none;
}
.CheckBoxLabelClass{
background: url("img/UnCheck.png") no-repeat;
padding-left: 30px;
padding-top: 3px;
margin: 5px;
height: 35px;
width: 81px;
display: block;
}
.CheckBoxLabelClass:hover, .RadioLabelClass:hover{
text-decoration: underline;
}
.LabelSelected{
background: url("img/Check.png") no-repeat;
}
.RadioLabelClass{
background: url("img/UnCheck.png") no-repeat;
padding-left: 30px;
padding-top: 3px;
margin: 5px;
height: 35px;
width: 81px;
display: block;
float: left;
}
.RadioSelected{
background: url("img/Check.png") no-repeat;
}
</style>
<form id="zxc">
<input checked="checked" id="Radio1" class="RadioClass" name="group1" type="radio" >
<label id="Label1" for="Radio1" class="RadioLabelClass RadioSelected"></label>
<input id="Radio2" class="RadioClass" name="group1" type="radio">
<label id="Label2" for="Radio2" class="RadioLabelClass"></label>
<input id="Radio3" class="RadioClass" name="group1" type="radio">
<label id="Label3" for="Radio3" class="RadioLabelClass"></label>
</form>
И соответственно
делаю так:
дублирую стиль
<style>
.CheckBoxClass2,.RadioClass2{
display: none;
}
.CheckBoxLabelClass2{
background: url("img/UnCheck2.png") no-repeat;
padding-left: 30px;
padding-top: 3px;
margin: 5px;
height: 35px;
width: 81px;
display: block;
}
.CheckBoxLabelClass2:hover, .RadioLabelClass:hover{
text-decoration: underline;
}
.LabelSelected{
background: url("img/Check2.png") no-repeat;
}
.RadioLabelClass2{
background: url("img/UnCheck2.png") no-repeat;
padding-left: 30px;
padding-top: 3px;
margin: 5px;
height: 35px;
width: 81px;
display: block;
float: left;
}
.RadioSelected2{
background: url("img/Check2.png") no-repeat;
}
</style>
Меняю класс
<input id="Radio2" class="RadioClass2" name="group1" type="radio">
<label id="Label2" for="Radio2" class="RadioLabelClass2"></label>
Но так не работает
Подскажите в почему ?