Single Choice: Button is barely visible when selected

Radio buttons on our form, such as this question

"Is there someone else who is in charge of student involvement . . ."

are barely visible when selected. Just a grey shadow on the circle.

How do we make those visible with typical styling?

Thanks

Robert

Hi Robert,

Thanks for reaching out to Jotform Support. I'm sorry you're having trouble with the visibility of your selected radio buttons. I checked your form and see that it's the same case for all of your Single Choice fields on your form. You can inject the below CSS Code to fix it. Keep in mind that you can change the color to your liking.

/* Change Single Choice option's background when selected -#13470791 */

.form-radio+label:after, .form-radio+span:after {

  background: #2C3344 ! important;

}

/* Code ends here */

It's really easy to do, let me show you how:

1. In Form Builder, click on the paint roller icon.
2. Select the Styles tab.
3. Scroll down through Inject Custom CSS and enter your CSS code.

That's it. Here's what it should look like afterward:

Here's also a link to my demo form. Feel free to clone it to your account if you wish.

Let us know if you need any more help.

That worked for radio buttons, but not for checkboxes, such as the question:

Type of Organization. Please check all that are applicable. You can then provide more specific info below.*

Thanks

Hi Robert,

Thanks for getting back to us. I checked your injected CSS codes and noticed that there is this part that's causing your checkbox to appear having a white background when ticked:

You can remove this or change the color for this if you prefer.

Another way of styling this is through the Advanced Form Designer. Here's how:

1. While on the Form Designer panel, click the Advanced Designer button
   
2. Next, you can select your checkbox element, and then on the design panel on the right, you can click on the template and the color.
   
3. On the radio/checkbox button template, you will notice the variety of styles available after you click it
   
4. Once you're done with editing your form, you can click the Save button on the upper-left part of the page and close it by clicking the close button on the top-left part (just above the save button)
   

Let us know if you have more questions or need more help.

Those instructions (the first option, for deleting some CSS) are incorrect. When I tried it, it turned the background behind the 'required' asterisk black instead of the checkboxes. See image below. I changed black back to white.

Your second approach looks as if it might need to be done for each element with checkboxes, rather than global to the form. Can't really tell.

thanks

Hi Robert,

Thanks for getting back to us. You can add the CSS code below into your form, it should target all checkbox elements:

/* Change checkbox element's selected option background color*/

.form-checkbox:checked+label:after, .form-radio:checked+label:after {

background: #2C3344 ! important;

}

/* end */

Check this out:

Give it a try and let us know if there's anything else we can help you with.

Thanks

I wish jotform allowed control with menus instead of forcing us to deal with CSS!