ACF outputs a form label/input like this:
<div ...><label>First Name:</label></div>
<div ...><input ...></div>
This makes it difficult/impossible to work with the label/input combo via JS and CSS.
a better way (in my opinion) would be this:
<div ...>
<input name="x" ...>
<label for="x">
</div>
this would allow for CSS to create fake stylized inputs:
input + label::before { ... }
is there a way to override the output without hacking the original ACF core?
also in other cases (a nested options list) the <label> element actually “wraps” the input — which is even worse because there’s no easy way to do a “parent” selector in pure CSS.
ie; if I wanted to style the label of a checked input, it would not be possible to do in CSS when it was wrapping the input.
labels should always come after an input in code, and move them around and style them with CSS
I’m currently having this issue. I’m using the front-end form and all the checkboxes are:
<label>
<input></input>
“Label Text”
</label>
This is making it impossible for me to style since I want to style the label based on input:checked. I wish there was a way to make the output like Saturn suggested, or at the very least wrap the “label text” in a span.
Has anyone had any luck with this?
I wrote this hack (in javascript) to “fix” the issue;
$('form label > input').each(function() {
$(this).insertBefore($(this).parent());
});
$('form.acf-form label').each(function() {
$(this).attr('for', $(this).prev('input').prop('id'));
});
