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.

  • 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.

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

You must be logged in to reply to this topic.