WordPress fluent form - radio button text CSS-CodePudding

I have a contact form I've created using fluent forms in WordPress.  

In WordPress - fluent forms - on the selected form.  I've gone to "Setting and Integrations"  and I'm trying to add custom CSS.  The form in CSS speak is "fluent_form_3"

All my other css is working, see www.brujitacasa.com/testQJS for example, but I can not get the radio buttons to change their colour to white so they can be seen.


I've tried setting 
 - .fluentform .ff-el-form-check label.ff-el-form-check-label
 - ff-el-form-check-input
 - ff-el-form-check-radio
 - ff-el-form-check  
 - ff-el-form-check-  
 - ff_item_selected

Some examples I've tried are.... It seems so simple, but I'm missing something.


    form.fluent_form_3 .ff-el-form-control {     color: white; /*#495057; / *change font color*/
    }
/*Change label styles*/
.ff-el-input--label{
font-size:22px; /*change label font size*/
    color: white; /*change label color*/
}


/* all the input fields   dropdown options */
form.fluent_form_3 label { color: white; }

CodePudding user response：

Looks like you're trying to adjust the styling of native elements. That won't work; styling radio-buttons (& checkboxes) requires you to hide the input and recreate it. This is usually done by styling the pseudo elements (before & after) of the label.

Examples (incl. code): https://www.sliderrevolution.com/resources/styling-radio-buttons/

CodePudding user response：

It turns out the answer is VERY simple. because the label is not in the input all you need is


form.fluent_form_3 .ff-el-form-check-label span { color: white;}

where fluent_form_3 is the code for your specific form