<div class="form">
      <input
        oninput="return showIcon()"
        class="search"
        type=“search"
        autocomplete="off"
        placeholder="Search"
      />
      <div class="img">
        <span class="fa fa-close"></span>
      </div>
    </div>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  height: 100vh;
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
  background-image: linear-gradient(
    109.6deg,
    rgba(255, 115, 68, 1) 11.2%,
    rgba(244, 255, 32, 1) 100.6%
  );
}

.form {
  width: 300px;
  position: relative;
}
.form input {
  margin: 10px 0;
  width: 100%;
  background-color: #e2e2e2;
  border: none;
  outline: none;
  border-radius: 4px;
  padding: 12px 20px;
}

.img {
  display: none;
}

.active .img {
  position: absolute;
  top: 20px;
  display: block;
  right: 20px;
  color: #949494;
}
    function showIcon() {
        const username = document.querySelector(".search").value;
        const img = document.querySelector(".img");

        if (username.length <= 0) document.body.classList.remove("active");
        else document.body.classList.add("active");

        img.addEventListener("click",()=>{
          document.querySelector(".search").value = "";
          document.body.classList.remove("active")
        })
      }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.