styling the X to remove txt in search field

Hi @hebhansen,

I understand that you need help customizing the “X” icon that appears in the search form to reset the input field. I would like to inform you that this icon is a pseudo-element added by browsers and is not controlled by SearchWP.

For more information on its functionality and how to customize it, I recommend checking out this helpful link.

If you need any other information, then please let me know.

Thx @kjswp

To whom it may concern:

This is adapted for Twenty Twenty Four. It adds a circle icon behind the X to create contrast in almost any environment. There is some stuff for light and dark theme if required. Color variables pull from WordPress default colors to adjust to any block theme.

/************* Search Fields - Light & Dark Themes (Not active) *****************/
input[type="search"].theme-dark {
  background: var(--wp--preset--color--contrast-2);
  color: var(--wp--preset--color--base-2);
}

input[type="search"].theme-light {
  background: var(--wp--preset--color--base-2);
  color: var(--wp--preset--color--contrast-2);
}

/************* Search Fields - The Reset X to delete entered text. Let's insert an icon background for contrast *****************/
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  border-radius: 50em;
  background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
}

input[type="search"]:focus::-webkit-search-cancel-button {
  opacity: .3;
  pointer-events: all;
}

input[type="search"].theme-dark::-webkit-search-cancel-button {
  filter: invert(1);
}