Question 29867 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress fluent form – radio button text CSS

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; }
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search