I want to reomve cross on buttons and also button background become green when option is selected
-
gabrielmelgacocostaAsked on February 03, 2023 at 03:46 AM
https://www.jotform.com/form/230325699874469
I want to reomve cross on buttons and also button background become green when option is selected
-
OliviaAnswered on February 03, 2023 at 05:52 AMJotform Support
Hi Gabriel,
Thanks for reaching out to Jotform Support. I understand the issue, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.
Thanks for your patience.
-
OliviaAnswered on February 03, 2023 at 06:25 AMJotform Support
Hi Gabriel,
Thank you for your patience. You can remove the cross and change the button's color after clicking on it easily. Let me show you how to do it:
1. In Form Builder, select the field of the Line Radio Buttons widget on your form.
2. Click on the Wand icon and go to the Custom CSS tab at the top of the field that showed up.
3. Copy and paste the code below into the field:
.iradio_line-orange.checked {
background-color: #2fbd0d;
}
.iradio_line-orange.checked .icheck_line-icon {
display: block;
}
.icheck_line-icon {
display: none;
}
4. Now, click on Update Widget to save your changes and apply the same steps to the other widget.
This is how the buttons will look when they are selected:
Give it a try and let us know how it goes.
-
gabrielmelgacocostaAnswered on February 03, 2023 at 08:46 AM
This check sign will not show
-
BryanAnswered on February 03, 2023 at 09:10 AMJotform Support
Hi Gabriel,
Thanks for getting back to us. I cloned your form titled Assistance Flash to see if I can replicate the issue, but I was able to see the check icon. Check out the screencast below to see the result on my end:
If you want to remove the tick icon, you can do it easily by injecting the CSS Code below into the widget:
1. In Form Builder, click on the Line Radio Buttons widget.
2. Click on the Wand icon on the right side of the widget.
3. In the menu that opens on the right side of your screen, click on Custom CSS.
4. Paste the CSS Code below into the box:.iradio_line-orange.checked .icheck_line-icon {
display: none;
}
5. Click on Update Widget on the bottom-left side of the box.
Don't forget to inject the CSS Code into all the Line Radio Buttons widgets. Check out the screencast below to see the result:
Let us know if there’s anything else we can help you with.