Question

6
Replies
7121
Views
SidneyCoats Member since 2016 5 posts
Posted: 4 years ago
Last activity: 4 years 9 months ago
Closed
Solved

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;

 

}

 

User Interface
Moderation Team has archived post
Share this page LinkedIn