How to style the X in webkit-search-cancel-button #10190
Replies: 5 comments 5 replies
-
The width/height on the Internet Explorer code is to ensure that no space is kept for the component. Otherwise, if you type text long enough, the content may be hidden under the hidden X. That's it. Copy/paste this code in your css file, all search box won't have that annoying X anymore. smiONE Card |
Beta Was this translation helpful? Give feedback.
-
Thanks for the help! One last thing. I am trying to change the color of an SVG. Basically I want it white when dark, gray-900 when light. Setting the fill to any color does not seem to work, it just stays black. Can you check out this example and see what I am doing wrong? |
Beta Was this translation helpful? Give feedback.
-
A little bit OT but, if you only need to remove the search decoration, use the following plugin: require('tailwindcss/plugin')(function ({addBase}) {
addBase({
'[type="search"]::-webkit-search-decoration': {display: 'none'},
'[type="search"]::-webkit-search-cancel-button': {display: 'none'},
'[type="search"]::-webkit-search-results-button': {display: 'none'},
'[type="search"]::-webkit-search-results-decoration': {display: 'none'},
})
}), |
Beta Was this translation helpful? Give feedback.
-
I wanted to keep the input cancel button but get rid of the default ugly default one. I've tried the My best bet was apllying css styles to the input directly using For the input cancel button replacement, I've chosen a .svg icon, it can be a .png image too, but svg quality does not degrade and allows us to customize all its properties in css directly. Before getting to the css part, you can pick a "close" icon from Flowbit icons here, then search for "close" and copy the svg icon code for the chosen icon. After grabbing your icon, it's important to know that the svg must be encoded as a "data:image/svg+xml,..." uri string for using it with the The tool will give you a css ready version snippet for using in your styles, so just copy the snippet under the "Ready for CSS" text area as we'll use it right ahead. You should get something like the line bellow. background-image: url("data:image/svg+xml,%3Csvg class='w-6 h-6 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm7.707-3.707a1 1 0 0 0-1.414 1.414L10.586 12l-2.293 2.293a1 1 0 1 0 1.414 1.414L12 13.414l2.293 2.293a1 1 0 0 0 1.414-1.414L13.414 12l2.293-2.293a1 1 0 0 0-1.414-1.414L12 10.586 9.707 8.293Z' clip-rule='evenodd'/%3E%3C/svg%3E%0A"); In the above snippet change the Now, finally in your css stylesheet, use the snippet bellow, but remember to replace
/* Style specific input clear cancel button */
[type='search']::-webkit-search-cancel-button {
-webkit-appearance: none;
background-color: var(--color);
-webkit-mask-image: url("data:image/svg+xml");
background-size: 20px 20px;
height: 20px;
width: 20px;
cursor: pointer;
transition: background-color 0.35s ease;
} For targeting only a specific input field, give it a custom class name, for example /* Style specific input clear cancel button */
.my-input[type='search']::-webkit-search-cancel-button {
... above styles
} To change the icon color on :hover or :active states: /* Style specific input clear cancel button */
.my-input[type='search']::-webkit-search-cancel-button:hover {
...
background-color: var(--hover-color);
} Preview: |
Beta Was this translation helpful? Give feedback.
-
In terms of input type="search" is there an example with tailwind anywhere to style the little X to clear the typed filter?
Beta Was this translation helpful? Give feedback.
All reactions