Add style for search input clear

Styling overrides for the clear button present in some browsers for input="search"
This commit is contained in:
Victor Westerlund 2021-12-28 20:27:05 +01:00
parent 1f0024afa6
commit a63714304b

View file

@ -16,7 +16,7 @@ input[type="search"] {
height: 100%; height: 100%;
font-size: 18px; font-size: 18px;
color: inherit; color: inherit;
padding: 0 calc(var(--padding) * 2); padding: 0 calc(var(--padding) * 1.5);
background-color: transparent; background-color: transparent;
border: none; border: none;
outline: none; outline: none;
@ -31,6 +31,14 @@ input[type="search"]::placeholder {
color: rgba(var(--color-background),.4); color: rgba(var(--color-background),.4);
} }
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
height: 32px;
width: 32px;
background: center no-repeat rgba(var(--color-background),.1) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAAAXNSR0IArs4c6QAAAFRJREFUeNrlkrkNADEIBK8JunD/GVW4oLnMAViagNBkLDsS3/d4sEiiqUGy7kACmyj2DeQRavEgTRGkZ4oUuyPF7ojYBRi35ENP1+qHG7+GP9/b8QPsDLZNvX0megAAAABJRU5ErkJggg==');
cursor: pointer;
}
#results { #results {
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;