Support

Account

Home Forums Backend Issues (wp-admin) How can I add a class to the radio button input?

Solving

How can I add a class to the radio button input?

  • I’ve got a radio button field called text_and_border_color. The choices are

    gray : #c2c2c2
    green : #009BAA
    red : #ff575c

    What I want to do is style the backend button labels and add the corresponding CSS color to the text of the label. So I’m thinking I should add a class to the input, preferably the content of the label above.

    Is this possible? I know i can use jQuery to add the class, but I’d rather use CSS, if possible.

    This is the rendered HTML of the button and input and label in the backend:

    <li>
    <label>
    <input id="acf-field_5af32dbd01019" name="acf[field_5af32dbd01019]" value="gray" type="radio">#c2c2c2
    </label>
    </li>

    How can I add class="gray" , etc., to each input?

  • You cannot add classes to the individual radio fields using ACF. You can target the button by the value.

    
    [data-key="field_5af32dbd01019"] input[value="gray"] {
      /* your css here */
    }
    

    the first part of the selector targets the entire radio group and the second part targets the button with the value of gray.

    • my3uka

    • March 26, 2020 at 1:17 am

    how can i add class into text field?

  • You can only add a class to the field wrapper. Adding classes to input fields is not possible without using JavaScript.

    • my3uka

    • March 26, 2020 at 7:49 pm

    Ok, thank you.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.