How to get rid of the "X" on the search bar

Question

I'm trying to get rid of the "X" button that shows up when writing something in the search bar, or at least change it:

<input type="search">

I tried the following CSS:

input[type="search"]{-webkit-appearance: none;}

and some more webkit stuff that did not work.

@AlonEitan Looks like the question is alright. Not sure if it's been answered already. — Praveen Kumar Purushothaman, Jul 12 '19 at 17:44
@PraveenKumarPurushothaman Oh, the OP is talking about `input[type="search"]`, now I get it :) — Alon Eitan, Jul 12 '19 at 17:45
Possible duplicate of [Remove IE10's "clear field" X button on certain inputs?](https://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs) — Kaiser, Jul 12 '19 at 18:07

score 7 · Answer 1 · answered Jul 12 '19 at 17:43

I tried searching Google for input type text remove close. I got this result. You can use the following code to remove it on Chrome or Internet Explorer.

/* clears the 'X' from Internet Explorer */
input[type=search]::-ms-clear {  display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal {  display: none; width : 0; height: 0; }

/* clears the 'X' from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

<input type="search" />

I got the above code from: Remove the X from Internet Explorer and Chrome input type search | Maxime Rouiller.

Just found that it could be a possible duplicate of Remove IE10's "clear field" X button on certain inputs?

Kaiser · Answer 2 · 2019-07-12T17:46:56.950

3

Try the following CSS code:

 /* clears the 'X' from Internet Explorer */
 input[type=search]::-ms-clear {  
 display: none; 
 width : 0; 
 height: 0; 
 }
 input[type=search]::-ms-reveal { 
 display: none; 
 width : 0; 
 height: 0; 
 }

/* clears the 'X' from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { 
display: none; 
}

See more at link

edited Jul 12 '19 at 17:46

answered Jul 12 '19 at 17:45

Kaiser

1,957
1
19
28

1

Isn't this the same code as mine? – Praveen Kumar Purushothaman Jul 12 '19 at 17:46

score -3 · Answer 3 · edited Jul 12 '19 at 18:04

-3

Thanks this is the code that did the job:

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

edited Jul 12 '19 at 18:04

Praveen Kumar Purushothaman

164,888
24
203
252

answered Jul 12 '19 at 18:03

Bar Afenjar

31
1
1

Since your question has been answered the same way, please accept one of the answers above. – Reza Saadati Jul 12 '19 at 18:28

How to get rid of the "X" on the search bar

3 Answers3