How to Style Radio Buttons in the Form with CSS

When a visitor clicks radio buttons, a light grey circle appears around it. That is not very visible. How do I make the click fill the button with a dark color?

thanks

Hi rtolmach,

Thanks for reaching out to Jotform Support. I checked your CSS code and it appears that the last line of your injected CSS code is the one causing the selected radio button item causes itself to appear empty:

::after {

  background-color: white!important;

}

You can remove this CSS code above and it should fix your issue. But can you tell us what you are trying to set white here? Because this code encompasses all other CSS codes and this is causing the radio button choice that is selected to be white also.

As soon as we hear back from you we'll help you more with this.

I don't know what else were were trying to set to white. Perhaps the little circle in the collapsible section tool? Anything else you see on the form?

How would I separately set the color for both:

• little circle in the collapsible section tool
• radio butttons

Thanks

Hi rtolmach,

I cloned and tested your form on my end, and it seems that the CSS code highlighted by my colleague affected the radio button and the circle on the collapsible section. Check out the screencast below:

As you can see above, when you remove the CSS code, it will affect the radio button and the collapsible section. Can you tell us what changes would you like to do on these elements?

Once we hear back from you, we can be able to help you with this.

I would like the circle on the collapsible section to be white, as it is now.

I would like the selected radio button and checkboxes to be dark blue, as they are on this other form of ours: https://form.jotform.com/242756744598171

thanks

Hi rtolmach,

You can inject the custom CSS code below to only change the color of the Section Collapses while the color of the Radio Button stays as dark blue. Let's do it:

1. Copy the code below.

/* Specific styles for collapsible sections */

.form-collapse-table,

.form-collapse-mid,

.form-collapse-page-section {

    background: #94cbdc !important;

    box-shadow: none !important;

    text-shadow: none !important;

    border-color: #94cbdc !important;

    margin-bottom: 5px;

    margin-top: 5px;

    border-radius: 0px;

}





/* Reset ::after pseudo-element for collapsible sections */

.form-collapse-table::after {

    background-color: white !important;

}





/* Styles for other form elements */

.form-autocomplete-list {

    background-color: #fff;

}





.form-autocomplete-list-item:hover {

    background-color: #a9bff9;

}





.form-autocomplete-list-item {

    padding: 5px;

}





.form-section.page-section li:first-child a:link,

.form-section.page-section li:first-child a:visited,

.form-section.page-section li:first-child a:hover,

.form-section.page-section li:first-child a:active {

    color: #94cbdc !important;

}





.form-submit-button {

    background: #94cbdc !important;

    height: 50px;

    width: 150px;

    border-radius: 0 !important;

    box-shadow: none !important;

    text-shadow: none !important;

    border-color: #94cbdc !important;

}





.form-textarea {

    width: 600px;

}





#first_3,

#last_3 {

    width: 120px;

}





.form-line.form-line-column.form-col-1.form-line-column-clear {

    width: 300px;

}





.form-textarea-limit-indicator label {

    text-align: left;

}





li[data-type="control_phone"] .form-input-wide[data-layout="half"] {

    width: calc(100%);

}

2. In Form Builder, at the top right side of the page, click on the Paint Roller icon.

3. Under the Styles Tab, select all the code in the Inject Custom CSS field and change it with the code I've provided instead. That's it.

Here is a screencast of the final results:

Give it a try and let us know if you need any other help.