// source https://jsbin.com/tipeyox

index.html

<form action="" method="get">
   <input type="text" name="search" required="required" placeholder="type here"/>
   <input type="reset" value="" alt="clear" />
</form>
  
<style>
   input[type="text"]
   {
      height: 38px;
      font-size: 15pt;
   }

   input[type="text"]:invalid + input[type="reset"]{
     display: none;
   }
  
   input[type="reset"]
   {
      background-image: url( https://img.icons8.com/windows/32/000000/macos-close.png );
      background-position: center center;
      background-repeat: no-repeat;
      height: .8rem;
      width: .8rem;
      border: none;
      background-color: transparent;
      cursor: pointer;
      position: relative;
      left: -1.8rem;
   }
</style>

A search field with a 'clear' button when there's content in it.