-
portcityroboticsAsked on March 16, 2016 at 11:06 AM
When I try to set a custom design to checkboxes, the "other" option doesn't reflect those changes.
-
Kiran Support Team LeadReplied on March 16, 2016 at 12:02 PM
I'm checking on this issue. Please allow me some time to check on this and get back to you with relevant information.
Thank you for your patience.
-
Kiran Support Team LeadReplied on March 20, 2016 at 3:15 PM
Sorry for the delay and thank you for being patient. As I work on this issue, it seems that it is quite difficult to style the radio buttons/checkboxes without having labels using only CSS. However, I managed to get it done by using image backgrounds.
Please inject the following CSS code to your form to have the same design to the other boxes as well.
input.form-radio-other {
visibility : hidden;
}
input.form-radio-other:after {
border-color : #008000;
border-style : solid;
border-width : 2px;
position : absolute;
height : 14px;
left : 4px;
top : 2px;
width : 14px;
content : '';
background-color : #fff;
border-radius : 50%;
visibility : visible;
}
input:checked.form-radio-other:before {
background-color : #008000;
}
input:checked.form-radio-other:after {
background-image : url('https://shots.jotform.com/kiran/screenshots/dot.png');
background-repeat : no-repeat;
}
input.form-checkbox-other {
visibility : hidden;
}
input.form-checkbox-other:after {
border-color : #008000;
border-style : solid;
border-width : 2px;
position : absolute;
left : 4px;
top : 2px;
content : '';
background-color : #fff;
border-radius : 50%;
visibility : visible;
width : 14px;
height : 14px;
}
input:checked.form-checkbox-other:before {
background-color : #008000;
}
input:checked.form-checkbox-other:after {
background-image : url('https://shots.jotform.com/kiran/screenshots/tick.png');
background-repeat : no-repeat;
}
Once the code is injected to your form, the selected radio button or checkbox shall be displayed as shown below:
Hope this information helps!