{"id":1821,"date":"2024-04-25T17:38:05","date_gmt":"2024-04-25T23:38:05","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=1821"},"modified":"2024-04-25T17:38:06","modified_gmt":"2024-04-25T23:38:06","slug":"the-html-css-and-svg-for-a-classic-search-form","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/the-html-css-and-svg-for-a-classic-search-form\/","title":{"rendered":"The HTML, CSS, and SVG for a Classic Search Form"},"content":{"rendered":"\n

Let’s build a search form that looks like this:<\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

That feels like the absolute bowl-it-down-the-middle search form right now. Looks good but nothing fancy. And yet, coding it in HTML and CSS I don’t think is perfectly intuitive and makes use of a handful of decently modern and slightly lesser used features.<\/p>\n\n\n\n

The Label-Wrapping HTML<\/h2>\n\n\n\n

At a glance, this looks like an <input><\/code> all by itself. Perhaps the placeholder text is pushed in with some text-indent<\/code> or something and an <svg><\/code> icon is plopped on top. But no, that’s actually harder than what we’ve done here. Instead we’re going to wrap the input in a label like this:<\/p>\n\n\n

<label<\/span> class<\/span>=\"searchLabelWrap\"<\/span>><\/span>\n  Search\n  <input<\/span> type<\/span>=\"search\"<\/span> placeholder<\/span>=\"Search\"<\/span> class<\/span>=\"searchInput\"<\/span> name<\/span>=\"s\"<\/span>><\/span>\n<\/label<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
This wrapping means the label and input are automatically tied to each other (e.g. clicking the label will focus the input) without having to use the for<\/code> attribute and a matching id<\/code>. <\/p>\n\n\n\n
We’re also using the search<\/code> type here on the input, which is semantically correct, but also gives us the free UX of having a \u2716\ufe0f “clear search” icon in the input for free.<\/p>\n\n\n\n
Wrapping All That in a Search and Form element<\/h2>\n\n\n\n
HTML now has a <search><\/code> element, so again that’s a semantically smart choice, and we’ll also use a <form><\/code> element so that submitting the search can be done with the Enter key. Gotta think UX! If you don’t like the extra wrapper, you could put role=\"search\"<\/code> on the <form><\/code>, but I like it:<\/p>\n\n\n
<search<\/span>><\/span>\n<\/span><\/mark>  <form<\/span> action<\/span>=\"\/search\"<\/span> method<\/span>=\"GET\"<\/span> id<\/span>=\"searchForm\"<\/span>><\/span>\n<\/span><\/span>    <label<\/span> class<\/span>=\"searchLabelWrap\"<\/span>><\/span>\n<\/span><\/span>       ...\n<\/span><\/span>    <\/label<\/span>><\/span>\n<\/span><\/span>  <\/form<\/span>><\/span>\n<\/span><\/span><\/search<\/span>><\/span> \n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
The GET method<\/code> means it will append our search term as a search parameter which is usually a desirable trait of a search form. The name<\/code> attribute of the input will be the search param key. That’s looking pretty solid right there.<\/p>\n\n\n\n
Hiding the Label, Adding an Icon<\/h2>\n\n\n\n
We definitely need there to be a text label for the input for screen readers, but since we’ll be visually marking the input with both a visual icon and placeholder text, I think it’s OK to hide the text label while leaving it accessible. <\/p>\n\n\n
<label<\/span> class<\/span>=\"searchLabelWrap\"<\/span>><\/span>\n<\/span><\/span>  <span<\/span> class<\/span>=\"visually-hidden\"<\/span>><\/span>Search<\/span<\/span>><\/span>\n<\/span><\/mark>  <svg<\/span> viewBox<\/span>=\"0 0 512 512\"<\/span> aria-hidden<\/span>=\"true\"<\/span> class<\/span>=\"icon\"<\/span>><\/span>\n<\/span><\/mark>    <path<\/span> d<\/span>=\"...\"<\/span> \/><\/span>\n<\/span><\/span>  <\/svg<\/span>><\/span>\n<\/span><\/span>  <input<\/span> type<\/span>=\"search\"<\/span> placeholder<\/span>=\"Search\"<\/span> class<\/span>=\"searchInput\"<\/span>><\/span>\n<\/span><\/span><\/label<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n
.visually-hidden<\/span> {\n  position<\/span>: absolute;\n  left<\/span>: -9999px<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Label Wrapping Styling<\/h2>\n\n\n\n
Without any CSS, we’re in this sort of situation:<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
Perfectly functional, but we’ve got work to do. Visually, we want the icon to appear inside<\/em> the “input” area. So we’ll actually apply the background to the searchLabelWrap<\/code> instead here, and wipe out all the styling on the input itself. While we’re at it, let’s think about Dark Mode\/Light Mode and use the newfangled light-dark()<\/code> function. This is very new so, ya know, do what you gotta do. We’ll keep things aligned with flexbox and apply very chill other styles:<\/p>\n\n\n
.searchLabelWrap<\/span> {\n  display<\/span>: flex;\n  gap<\/span>: 0.5rem<\/span>;\n  background<\/span>: light-dark<\/span>(var(--gray-light), var<\/span>(--gray-dark));\n  padding<\/span>: 0.5rem<\/span> 1rem<\/span>;\n  border-radius<\/span>: 0.5rem<\/span>;\n}\n\n.searchInput<\/span> {\n  border<\/span>: 0<\/span>;\n  outline<\/span>: 0<\/span>; \/* focus style on parent *\/<\/span>\n  background<\/span>: transparent;\n  font<\/span>: inherit;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
We’re doing the sin of removing the focus style on the input, which isn’t a very accessible thing to do. So we gotta bring that back!<\/p>\n\n\n\n
Focus Within FTW<\/h2>\n\n\n\n
It’s actually the input itself which receives the :focus<\/code>, but we can target the parent here instead. Maybe use :has()<\/code> you say? Like :has(input:focus)<\/code> could work, but there is actually a cleaner way here:<\/p>\n\n\n
.searchLabelWrap<\/span> {\n  ...\n\n  &:focus-within {\n    outline<\/span>: 2px<\/span> solid var<\/span>(--focus-blue);\n    outline-offset<\/span>: 2px<\/span>;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
I love :focus-within<\/code> it’s so cool. It was kinda the OG has and it was theorized when it came out that it could be a gateway to :has()<\/code> and that’s totally what happened. <\/p>\n\n\n\n
Also notice the outline-offset<\/code> there. I think that’s a nice touch to push the somewhat beefy<\/a> outline away a smidge.<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
The Icon<\/h2>\n\n\n\n
I’m a fan of just using inline SVG for icons. No network request and easy to style my friends. Here’s one:<\/p>\n\n\n
<svg<\/span> viewBox<\/span>=\"0 0 512 512\"<\/span> aria-hidden<\/span>=\"true\"<\/span> class<\/span>=\"icon\"<\/span> width<\/span>=\"\n20\"<\/span>><\/span>\n  <path<\/span> d<\/span>=\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\"<\/span> \/><\/span>\n<\/svg<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
I like tossing a width<\/code> on there because an <svg><\/code> with a viewBox<\/code> before CSS loads can load super<\/em> wide on the screen and it’s akward. CSS will come in and make it right here:<\/p>\n\n\n
.icon<\/span> {\n  width<\/span>: 1rem<\/span>;\n  aspect-ratio<\/span>: 1<\/span>;\n  fill<\/span>: currentColor;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
You could apply different styling, but here I’m making the icon text follow the text color so it’s easier to update. The icon is also essentially in a square area hence the simple aspect-ratio<\/code>. <\/p>\n\n\n\n
Colors<\/h2>\n\n\n\n
I used a few --custom-properties<\/code> as we went. I’ll define them here at the root, as well as ensure our page knows we’re intending to support both modes:<\/p>\n\n\n
html<\/span> {\n  color-scheme<\/span>: light dark;\n\n  --gray-light<\/span>: #eee<\/span>;\n  --gray-dark<\/span>: #333<\/span>;\n  --focus-blue<\/span>: #1976d2<\/span>;\n}\n\nbody<\/span> {\n  background<\/span>: light-dark<\/span>(white, black);\n  color<\/span>: light-dark<\/span>(black, white);\n  font<\/span>: 100%<\/span>\/1.5<\/span> system-ui, sans-serif;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
That’ll do use nicely, finishing things off. <\/p>\n\n\n\n
Demo<\/h2>\n\n\n\n