Question
How do you customize radio buttons?
We have a custom class for our radio buttons that makes them into a green check and a red x - as apposed to two normal radio buttons. It worked fine in 7.1.5, but in 7.1.7, it causes the repeating grid in which it resides to always choose the first row - i.e., if we check the green check in the third row, it acts like we selected the one in the first row. The same behavior happens if we choose the red x - the other radio button - only the first row gets selected - or the buttons in that row. Again, this worked up until 7.1.9 - or at least in 7.1.5. The code for the custom class is below - it is in a css file.
.offers_wrapper .horizontal-radio .radioTable div span:first-child input[type="radio"]+label{
background: url('webwb/Acceptunchecked.png') no-repeat 0px 0px;
height:32px !important;
padding-bottom:5px !important;
background-size:54px;
width:54px !important;
padding-left:0;
padding-right:0;
display:inline-block;
text-indent:-1000em;
}
.offers_wrapper .horizontal-radio .radioTable div span input[type="radio"]+label{
background: url('webwb/Declineunchecked.png') no-repeat 0px 0px;
height:32px !important;
padding-bottom:5px !important;
background-size:54px;
width:54px !important;
padding-left:0;
padding-right:0;
display:inline-block;
text-indent:-1000em;
margin-left:0px;
}
.offers_wrapper .horizontal-radio .radioTable div span input[type="radio"]:checked+label{
background: url('webwb/Declinechecked.png') no-repeat 0px 0px;
height:32px !important;
padding-bottom:5px !important;
background-size:54px;
width:54px !important;
padding-left:0;
padding-right:0;
display:inline-block;
text-indent:-1000em;
margin-left:0px;
}
.offers_wrapper .horizontal-radio .radioTable div span:first-child input[type="radio"]:checked+label{
background: url('webwb/Acceptchecked.png') no-repeat 0px 0px;
height:32px !important;
padding-bottom:5px !important;
background-size:54px;
width:54px !important;
padding-left:0;
padding-right:0;
display:inline-block;
text-indent:-1000em;
margin-left:2px;
}
.offers_wrapper .horizontal-radio .radioTable div span:first-child input[type="radio"]+label{
background: url('webwb/Acceptunchecked.png') no-repeat 0px 0px;
height:32px !important;
padding-bottom:5px !important;
background-size:54px;
width:54px !important;
padding-left:0;
padding-right:0;
display:inline-block;text-indent:-1000em;
margin-left:2px;
}
.offers_wrapper .horizontal-radio .radioTable div span:first-child {padding-right:0;}
.offers_wrapper .horizontal-radio .radioTable input{position:fixed;left:-1000px;}
.offers_wrapper {
height:406px;
}
Hi
I would suggest you to run fiddler and check the function getting called and compare the same with out of the box radio button behavior
Please share the difference in fiddler that you can see so that we can comment on that.