Recolor the native search clear button
This commit is contained in:
parent
f0c7459980
commit
98c08e0c55
1 changed files with 15 additions and 0 deletions
|
|
@ -45,6 +45,21 @@ body {
|
|||
:where(.dark) textarea::placeholder {
|
||||
color: var(--color-neutral-500);
|
||||
}
|
||||
|
||||
/* Redraw the native search clear button so it follows our palette instead
|
||||
of the OS accent color. Firefox renders no button at all. */
|
||||
input[type="search"]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
background-color: var(--color-neutral-400);
|
||||
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 10.6 6.6 5.2 5.2 6.6l5.4 5.4-5.4 5.4 1.4 1.4 5.4-5.4 5.4 5.4 1.4-1.4-5.4-5.4 5.4-5.4-1.4-1.4z"/></svg>')
|
||||
no-repeat center / contain;
|
||||
cursor: pointer;
|
||||
}
|
||||
:where(.dark) input[type="search"]::-webkit-search-cancel-button {
|
||||
background-color: var(--color-neutral-500);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tighter heading rhythm for all rendered (prose) content. Overrides the
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue