Skip to content

Instantly share code, notes, and snippets.

@tj

tj/search.css

Created June 8, 2020 13:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tj/c718c3c17afd0eb7596c5c7f0d999a15 to your computer and use it in GitHub Desktop.
Save tj/c718c3c17afd0eb7596c5c7f0d999a15 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
search.css
input[type="search"]::-webkit-search-cancel-button {
--size: 11px;
--background: #7F7F7F;
--icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3IiBoZWlnaHQ9IjciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci14Ij48cGF0aCBkPSJNMTggNkw2IDE4TTYgNmwxMiAxMiIvPjwvc3ZnPgo=");
-webkit-appearance: none;
height: var(--size);
width: var(--size);
border-radius: var(--size);
background: var(--background) var(--icon) 50% 50% no-repeat;
}
input[type="search"]::-webkit-search-cancel-button:hover {
opacity: 0.9;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment