-
Tenniszentrum_ArsenalAsked on March 17, 2017 at 3:20 AM
By choosing "other option" at a radio button field, the design of the button stays standard and doesn't get the design choosen through the advanced designer.
How to change this, because it is looking quiet ......
-
Nik_CReplied on March 17, 2017 at 6:44 AM
Please copy and paste the below CSS in you Custom CSS field:
input.form-radio-other{
visibility: hidden;
}
input.form-radio-other:after {
height: 13px;
left: 5px;
position: absolute;
top: 7px;
width: 13px;
content: '';
border-color:#6f6f6f;
border-style:solid;
border-width:2px;
list-style: none outside none;
visibility: visible;
}
input:checked.form-radio-other:after {
background-color:#6f6f6f;;
}
And here is how ti will look like:
Let us know how it worked.
Thank you!
-
Tenniszentrum_ArsenalReplied on March 17, 2017 at 7:37 AM
Nice solution, thank you!
To have it perfect I wonder if it would be possible to get the space between the inner square and the border too?
-
Nik_CReplied on March 17, 2017 at 9:01 AM
You're welcome.
Please allow me some time to check that for you.
I'll get back to you as soon as possible.
Thank you!
-
Nik_CReplied on March 19, 2017 at 2:49 PM
Thank you very much for your patience.
I had a hard time to make that Other field's checkbox look the same like the first two. So I changed the first two to match the third one:
If that is something that could work for you please copy and paste the below CSS code in your Custom CSS Field:
input.form-radio-other{
visibility: hidden;
}
input.form-radio-other:after {
height: 14px;
left: 5px;
position: absolute;
top: 7px;
width: 14px;
content: '';
border-color:#6f6f6f;
border-style:solid;
border-width:2px;
list-style: none outside none;
visibility: visible;
}
input:checked.form-radio-other:after {
background-color:#555555;;
}
#label_input_103_0:after {
height: 14px!important;
left: 6px!important;
top: 2px!important;
width: 14px!important;
}
#label_input_103_1:after {
height: 14px!important;
left: 6px!important;
top: 2px!important;
width: 14px!important;
}
Here is my clone of your form: https://form.jotformpro.com/70753161070953 please check it.
Let us know if that works for you.
Thank you!