Styling apps and elements with CSS (that normally you can't)

Show and tell
, , ,
4

Hey everyone.

This use case came up in one of the communities I help out in and I noticed that some have asked about this but if you want to change the input color for radio buttons and checkboxes inside your new forms, you can target just them with the trick above. Normally, the input color dictates what you type inside of the input fields as well as radio buttons, single checkboxes and multi-checkboxes.

The image shows the settings for Wix Forms, showing how input style affects both text input and radio buttons, checkboxes and multi-checkboxes
The image shows the settings for Wix Forms, showing how input style affects both text input and radio buttons, checkboxes and multi-checkboxes951×809 60.7 KB

Normally, this works well but if you have dark form background, the text input might be too dark to see but it’s needed otherwise you are unable to see the inputted text.

The image compares two designs of a newsletter subscription form, both with a blue background and text, but differing in text color and fill color. (Captioned by AI)
The image compares two designs of a newsletter subscription form, both with a blue background and text, but differing in text color and fill color. (Captioned by AI)1107×598 71.6 KB

With the CSS trick above, you can manage this without having to make various changes within the settings.

/*used for single and multichoice*/
.form-section [data-hook="label-wrapper"],
/*used for single checkbox*/
.form-section [data-hook="label-wrapper"] span{
color: darkmagenta;
}

You can see the result below:

The image shows a Wix form builder interface with annotations pointing to the Name attribute for a single checkbox and the name of the form's parent section. (Captioned by AI)
The image shows a Wix form builder interface with annotations pointing to the Name attribute for a single checkbox and the name of the form's parent section. (Captioned by AI)1604×843 105 KB

span is needed for the single checkbox as the text is nested inside of the [data-hook] so if you have a single checkbox, make sure you use
.form-section [data-hook="label-wrapper"] span

PS. I took a look at the hover and disabled state and these elements aren’t changed by the settings so there should be no need to do it but you could customize the it if you need.

3 Likes