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.
