Hi, I use field IDs as CSS selectors in order to style the admin.
However, the generated input fields seem to differ between ACF4 and ACF5.
Instead of acf-field-label it’s now acf-field-key:
ACF4
<input type="text" id="acf-field-phone">
ACF5
<input type="text" id="acf-field_5c46914201e5e">
Change log seems to suggest such a change in 5.0, although it’s a bit vague (Overhaul of HTML & CSS)
Is there a way to revert this change?
Thanks
No there is not. The problem with field names is that they can be repeated (even when they shouldn’t be) allowing multiple fields to end up with the same ID which is not allowed. The field key on the other hand is always unique.
If you want to use custom styling in the admin it is better to assign a wrapper class or id to the field. You can also target an input in a specific field using something like
[data-name="phone"] .acf-input input {
...
}
The problem with field names is that they can be repeated (even when they shouldn’t be) allowing multiple fields to end up with the same ID which is not allowed.
I figured that was the reason
…it is better to assign a wrapper class or id to the field.
I never knew that was an option. Problem solved, thanks.
You can also target an input in a specific field using something like [data-name=”phone”]
That’s a nice choice as well. Thanks a lot.
