JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<h6>With clear X (Chrome, Edge and IE at least)</h6>

<input type="search" name="" id="" class="mb-1">


<h6>Without clear X</h6>

<input type="search" name="" id="" class="mb-1 remove-clear">

CSS

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

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

* {
  font-size: 24px;
  font-family: sans-serif;
}


.mb-5 {
  margin-bottom: 1rem;
}