How to style the X in webkit-search-cancel-button

[spacerobotTR]

In terms of input type="search" is there an example with tailwind anywhere to style the little X to clear the typed filter?

[wongjn]

https://play.tailwindcss.com/Jmwdh2a4yB?file=config

[spacerobotTR]

Thanks for the quick reply! In addition to that how would I change both the color and the icon?

[wongjn]

Apply -webkit-appearance: none and apply the icon as a background-image: https://play.tailwindcss.com/xlSAh2tA6b

[yakkityyak]

what if I want to use a local svg instead of an URL?

[brydakk]

exacly, what if you want svg in bg-image?

[jdiddydave]

This worked great! Thanks

[Jakeduncan00]

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

[spacerobotTR]

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?

https://play.tailwindcss.com/sRiDsWWuGq

[OzzyCzech]

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'},
  })
}),

https://play.tailwindcss.com/ofdLGWQdTh?file=config

[monecchi]

I wanted to keep the input cancel button but get rid of the default ugly default one. I've tried the tailwindcss/plugin approach here proposed by @spacerobotTR, but for my app project using latest Next.js 14 and tawilwindcss it doesn't work.

My best bet was apllying css styles to the input directly using -webkit-mask-image property, which allow us to set an image as a mask layer for an element.

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 -webkit-mask-image css property. So head over https://yoksel.github.io/url-encoder, and paste your icon svg copied code under "Insert SVG" text area.

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 background-image css property to -webkit-mask-image, and as we can see, the encoded svg comes with a few properties you might want to change or get rid of. I've remove class, changed width and height to 20px as I've found it to be more suitable for my input's height.

Now, finally in your css stylesheet, use the snippet bellow, but remember to replace -webkit-mask-image: url("") with the generated encoded svg data contents.

/app/global.css

/* 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 .my-input, and then use the same styles from the snippet above:

/* 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: