通过搜索图标扩展搜索栏，并使用Javascript在单击时显示关闭图标

<input type="text" id="search-bar" class="search-bar">
<i class="search-icon" id="search-icon"></i>

.search-icon {
  background-image: url("search-icon.png");
  width: 20px;
  height: 20px;
  background-size: cover;
  cursor: pointer;
}

.close-icon {
  background-image: url("close-icon.png");
  width: 20px;
  height: 20px;
  background-size: cover;
  cursor: pointer;
  display: none;
}

var searchBar = document.getElementById("search-bar");
var searchIcon = document.getElementById("search-icon");

searchIcon.addEventListener("click", function() {
  searchBar.value = "";
  searchIcon.style.display = "none";
});

searchBar.addEventListener("input", function() {
  if (searchBar.value !== "") {
    searchIcon.style.display = "block";
  } else {
    searchIcon.style.display = "none";
  }
});