Home › Forums › Front-end Issues › Markup for newly created taxonomy items in popup › Reply To: Markup for newly created taxonomy items in popup
thanks @hube2
the css method I use is widely accepted and used to create this type of effect… In essence: the input is hidden; the label after the input is styled with a :before to create a ‘fake’ checkbox. then using the sibling CSS method, I can style the label differently when the input is checked/selected:
# normal state
label:before {
content: ' ';
width:15px;
height: 15px;
background:red;
display:block;
float:left;
}
# checked state
input[type=checkbox]:checked + label:before {
background:blue;
}
Simple example, but you get the idea. You can see the effect it has in the image in my first post.
With the input being nested inside the label, this method isn’t possible.
According to W3 spec, label+input or input+label or label>input are all fine. But the first 2 options definitely give more control to developers + designers to style the inputs better with CSS methods.
Side note: I’m assuming you nest inside the label so that the label is clickable to select the input, but using for and id on the label + input would achieve the same result.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
🤔 Curious about the ACF user experience? So are we! Help guide the evolution of ACF by taking part in our first ever Annual Survey and guarantee you’re represented in the results. https://t.co/0cgr9ZFOJ5
— Advanced Custom Fields (@wp_acf) May 8, 2023
© 2023 Advanced Custom Fields.
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.