Changing color of checkbox itself

[Rad]

Hi Alex, I’ve a a multiselect checkbox field and would like to change the background color of the checkbox itself to white instead of default gray. Anyway to achieve this? thanks

Attachments:

1. 

   2024-11-08_12-24-16.png
   

[Alexander Bautz]

You can add this to your Custom CSS:

.spjs-form-choice-wrap .spjs_chk_checkmark,
.spjs_radio_wrap .spjs_radio_checkmark {
    background-color: white;
}

.spjs_chk_wrap input:checked~.spjs_chk_checkmark,
.spjs_radio_wrap input:checked~.spjs_radio_checkmark {
    background-color: gray;
}

Alexander

[Rad]

I copied the code as is to my CSS file and checkboxes look same. The default checkbox color should be same color as the Explain textbox when editing.

Attachments:

1. 

   2024-11-12_07-26-01.png
   

[Alexander Bautz]

I’m wondering if you have pasted the code in the correct place – can you show me a screenshot of your Custom CSS?

Alexander

[Rad]

I placed it withing my CSS file which is called from within custom CSS tab.

Attachments:

1. 

   2024-11-12_09-04-01.png
   

[Alexander Bautz]

To ease the troubleshooting, can you add the CSS to the Custom CSS area directly?

Alternatively, try adding !important to the style properties like this:

.spjs-form-choice-wrap .spjs_chk_checkmark,
.spjs_radio_wrap .spjs_radio_checkmark {
    background-color: white!important;
}

.spjs_chk_wrap input:checked~.spjs_chk_checkmark,
.spjs_radio_wrap input:checked~.spjs_radio_checkmark {
    background-color: gray!important;
}

Alexander

[Rad]

!important did the trick. thank you!

[Author]

Posts