Tony's Collections
Tony's Bundles
tony /
Styled Search Input
This snippet can be used to add a background image to a text field, which is particularly useful for search fields.
Code
input[type="search"] {
padding-left: var(--form-input-search-padding-left, 2.5rem) !important;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-4.35-4.35M17.5 11a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0Z'/%3E%3C/svg%3E");
background-position: left .75rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
}
Add this to the <head> of your page