CODEWITHSUNDEEP
htmlcss
aWebDeveloper
aWebDeveloper

Reputation: 38352

Change the color of the clear button (x) in input `type=search`

How do i change the color of X that appears on input[type=search]

By using webkit-search-cancel-button and webkit-appearance: none i have been able to change it to a colored square or circle but i have been unable to change the color of X.

The issue is default color of the X on safari is black and by textbox is black hence this is not visible. Chrome picks a safe color of grey but it too has the same issue.

Upvotes: 27

Views: 31124

Answers (6)

Shameless88
Shameless88

Reputation: 87

To get a green cross from the blue one, I did:

input[type="search"]::-webkit-search-cancel-button {
  filter: invert(100%) sepia(100%) saturate(500%) hue-rotate(90deg);
}
<input type="search" />

Upvotes: 4

angelblue05
angelblue05

Reputation: 11

It's 2024. I hope this helps someone. I stumbled upon a solution thanks to posts here.

When using filter, you are then able to change the color of the "x".

 input {
   color: red;
   background-color: black;
   border: black;
 }
 input[type="search"]::-webkit-search-cancel-button {
   filter: invert(100%);
   color: yellow; 
 }
<input type="search" />

Upvotes: 1

Mordred
Mordred

Reputation: 3941

It's 2023 and there's still no good solution to simply just change the color of the X. The color of the built in X can't be directly changed, but you can replace the built in X with your own, and change the color of that X.

For my needs, I wanted the color to be dynamic based on a generated theme so just creating an SVG in one color wasn't a good enough solution. However you can create an svg X and use -webit-mask-image to display it in your chosen color. This seems like a simpler generalized solution than some of the others presented, provided you can find or create an SVG mask image in the shape you need.

input {
    background: black;
    color: white;
}

[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    background-color: var(--color);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
    background-size: 20px 20px;
    height: 20px;
    width: 20px;
}
<input type="search" style="--color: #00a0a0;" value="teal">
<input type="search" style="--color: #ee00ee;" value="pink">

Upvotes: 7

Hoopless
Hoopless

Reputation: 51

A workaround for changing the color is using filter. In my case, I simply wanted the x to be black or gray (instead of blue), so I used a black and white filter

You could use an invert filter to make the x light on a dark background.

Upvotes: 5

haoyin
haoyin

Reputation: 363

You probably don't need the solution anymore, but I will just it leave here to see if it helps anyone.

You can't change the color of the clear button (x) directly (as far as I tried), but here's some trick I figured out to change the button appearance.

Basically, I just removed the default clear button and replaced it with a black clear button image (I used base64 encoded image here, you can use any).

[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  width: 10px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjEyMy4wNXB4IiBoZWlnaHQ9IjEyMy4wNXB4IiB2aWV3Qm94PSIwIDAgMTIzLjA1IDEyMy4wNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIzLjA1IDEyMy4wNTsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTEyMS4zMjUsMTAuOTI1bC04LjUtOC4zOTljLTIuMy0yLjMtNi4xLTIuMy04LjUsMGwtNDIuNCw0Mi4zOTlMMTguNzI2LDEuNzI2Yy0yLjMwMS0yLjMwMS02LjEwMS0yLjMwMS04LjUsMGwtOC41LDguNQ0KCQljLTIuMzAxLDIuMy0yLjMwMSw2LjEsMCw4LjVsNDMuMSw0My4xbC00Mi4zLDQyLjVjLTIuMywyLjMtMi4zLDYuMSwwLDguNWw4LjUsOC41YzIuMywyLjMsNi4xLDIuMyw4LjUsMGw0Mi4zOTktNDIuNGw0Mi40LDQyLjQNCgkJYzIuMywyLjMsNi4xLDIuMyw4LjUsMGw4LjUtOC41YzIuMy0yLjMsMi4zLTYuMSwwLTguNWwtNDIuNS00Mi40bDQyLjQtNDIuMzk5QzEyMy42MjUsMTcuMTI1LDEyMy42MjUsMTMuMzI1LDEyMS4zMjUsMTAuOTI1eiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=);
  background-size: 10px 10px;
}
<input type="search">

Upvotes: 20

Diego Borigen
Diego Borigen

Reputation: 725

I could't find a way to change only the color but you can overwrite the "x" button style with:

input[type="search"]::-webkit-search-cancel-button {
  /* Remove default */
  -webkit-appearance: none;
  /*Your new styles */
  height: 10px;
  width: 10px;
  background: red;
}

For now this is supported by Webkit browsers(Chrome, Safari). https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-search-cancel-button

Upvotes: 5

Related Questions