Add a submit button for Search field

[cara-tm]

Maybe the Search field need a Submit button:

<!-- Search -->
<label for="search">Search
	<input type="search" id="search" name="search" placeholder="Search">
	<input aria-label="Find" type="submit" name="search_submit" value=""> 
</label>

And the corresponding rules:

input[type="search"] + input[type="submit"]{
    position: absolute;
    z-index: 1;
    left: 0;
    width: fit-content;
    background: transparent;
    border: none
   }

html input[type="search"]~input[type="submit"]:focus{box-shadow:none}

Note: rules updated.

[lucaslarroche]

I like this idea too. It should probably be a separate SCSS file to be disabled.

It can be more generic (not only for search, but for all inputs text):

input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) + input[type="submit"],
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) + input[type="button"],
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) + button,
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) + a[role="button] {
   ...
}

Another crazy long CSS selector 😬...

We might want a visible button like here. Not so easy without a class on the label if we want to properly manage all the states (hover, focus, invalid).

[cara-tm]

I'm trying to obtain such a Bootstrap model (above linked). The only solution is Flexbox.