{"id":1650,"date":"2024-04-11T08:46:11","date_gmt":"2024-04-11T14:46:11","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=1650"},"modified":"2024-04-11T08:46:13","modified_gmt":"2024-04-11T14:46:13","slug":"a-css-powered-add-remove-tags-ui","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/a-css-powered-add-remove-tags-ui\/","title":{"rendered":"A CSS-Powered Add\/Remove Tags UI"},"content":{"rendered":"\n

Checkboxes and labels used<\/em> to have to be right next to each other to be a potent UI duo. You could do trickery like this:<\/p>\n\n\n

<label<\/span> for<\/span>=\"toggle\"<\/span>><\/span>Toggle<\/label<\/span>><\/span>\n<input<\/span> type<\/span>=\"checkbox\"<\/span> id<\/span>=\"toggle\"<\/span>><\/span>\n<div<\/span>><\/span><\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n
#toggle<\/span>:checked<\/span> + div<\/span> {\n  \/* Do something fancy in here with a toggleable on\/off state *\/<\/span>\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
But now, thanks to :has()<\/code> in CSS, we\u2019re not beholden to that structure anymore. We can :has() it all<\/a>, as it is said. Now that these HTML elements have some autonomy, without losing their connection to one another, a lot can be achieved<\/p>\n\n\n\n
Using this as a base concept, we can build a tag management component operated entirely in HTML & CSS.<\/p>\n\n\n\n
A Tag Component with Interactive HTML<\/h2>\n\n\n\n
A <label><\/code> is an interactive element that can trigger its controlled element. For instance, when we click a <label><\/code> paired with an <input type=\"checkbox\"><\/code> the checkbox\u2019s :checked<\/code> state toggles.<\/p>\n\n\n\n
A combo with a <label><\/code> allows us to design a toggle UI that can be operated from two different<\/strong><\/em> locations on a page (both the label and the checkbox). The controlled element is in one location and the label is in the other.<\/p>\n\n\n\n
How far and how independent these two locations have to be from each other for the duo to work used to be limited, since labels can\u2019t directly inform us which state their controlled element is currently in. For that, we have to ask the controlled element itself each time, and keep the label close to the element, so the label can be accessed in CSS during the element\u2019s state change.<\/p>\n\n\n\n
That was the case before.<\/p>\n\n\n\n
Because of modern CSS standards like Grid, :has()<\/code> selector and such, there\u2019s much more freedom now between the source code arrangement in the HTML and our ability to reach<\/a> any<\/a> element in CSS<\/a>.<\/p>\n\n\n
<div<\/span>>\n  <label<\/span> for<\/span>=\"one<\/span>\">One<\/span><\/label<\/span>>\n  <label<\/span> for<\/span>=\"two<\/span>\">Two<\/span><\/label<\/span>>\n  <label<\/span> for<\/span>=\"three<\/span>\">Three<\/span><\/label<\/span>>\n<\/div<\/span>>\n\n<p<\/span>>Arbitrary<\/span> DOM<\/span><\/p<\/span>>\n\n<div<\/span>>\n  <input<\/span> type<\/span>=\"checkbox<\/span>\" id<\/span>=\"one<\/span>\">\n  <input<\/span> type<\/span>=\"checkbox<\/span>\" id<\/span>=\"two<\/span>\">\n  <input<\/span> type<\/span>=\"checkbox<\/span>\" id<\/span>=\"three<\/span>\">\n<\/div<\/span>><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n
body<\/span>:has(<\/span>#one<\/span>:checked)<\/span> p<\/span> {\n  background<\/span>: pink;\n}\nbody<\/span>:has(<\/span>#two<\/span>:checked)<\/span> p<\/span> {\n  background<\/span>: lightgreen;\n}\nbody<\/span>:has(<\/span>#three<\/span>:checked)<\/span> p<\/span> {\n  background<\/span>: lightblue;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Although the\u00a0:has()<\/code>\u00a0selector can be used in many ways, in this article we\u2019ll focus on its ability to target an element containing a specific child element. The parent is mentioned before the colon (:<\/code>) and the child is mentioned inside the parentheses of\u00a0has()<\/code>. For example,\u00a0p:has(>\u00a0mark)<\/code> selects all elements that have at least one direct descendant that\u2019s a <mark><\/code>. Another example, div:has(:checked)<\/code> selects all <div><\/code> elements that have at least one descendant (direct or not) element that\u2019s in a checked state, like a radio or checkbox.<\/p>\n\n\n\n
Now that we\u2019ve got the basics covered. Here\u2019s the final demo we\u2019ll be working towards. We\u2019re going to use movie genres<\/strong> as our tags.<\/p>\n\n\n\n
In this article, I\u2019ll be using checkboxes, labels<\/strong>, and<\/strong> :has()<\/a><\/code> selectors to design<\/strong> a UI where you can add and remove \u201ctags\u201d<\/strong>. The UI will have a set of tags to select from, and a set of tags that have been selected. Clicking a tag in one set removes it from one area and makes it appear in the other set. It\u2019s a functionality that\u2019s perfect for checkboxes and labels to take on. Using the :has()<\/code> selector means, I can keep the two set of tags in as much of a distance or depth from each other as I want, which in turn provides a lot flexibility.<\/p>\n\n\n\n