How do I add an X tag in a search bar

Question

I am trying to code a website that has a search bar. Currently, I am polishing it up and adding some features to the site. One feature I want to add is an X every time someone types something into the search box and I want it to clear the text in the input. Technically I have achieved this but it does not feel so nice. I want it to act as the X at reverb.com.

Here is my version:

function deleteButton() {
  var deletebtn = document.getElementById("deletebtn");
  var input = document.getElementById("inputbar");

  if (input.value.length >= 1) {
    deletebtn.style.visibility = "visible";
    deletebtn.style.cursor = "pointer";
  }
}

function clearSearch() {
  var input = document.getElementById("inputbar");
  var deletebtn = document.getElementById("deletebtn");

  deletebtn.style.visibility = "hidden";
  input.value = "";
}

.exitbtn {
  margin-top: 39px;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-left: none !important;
  border-right: 1px solid rgba(0, 0, 0, 0.5) !important;
  color: rgba(0, 0, 0, 0.5);
  font-size: 16px;
  background: none;
  outline: none;
  transition: 0.3s;
}

.exitbtn img {
  visibility: hidden;
}

.exitbtn img:hover {
  transition: 0.3s;
  opacity: 1;
  content: url("images/orange-delete-sign.png");
}

.delete-sign {
  height: 31px;
  opacity: 0.7;
  display: inline-block;
}

I am showing my code just in case you are wanting it.

Here are some images of it working:

If you are wondering why I don't like this method, it is because when you hover over the button, it is still there and the Reverb version completely disappears and acts like a normal text box.

user_15035763 · Answer

If you want an 'X' you can use

×

(I would have commented this but I do not have enough SO reputation to comment)

user_14900600 · Answer

Try input type="search". It is an inbuilt input type in HTML which creates a cross as soon as a character is entered in the input field.

Here's an example for the ease of understanding:

input { /* You could use a class name/id as well */
border-radius: 5px;
}
.Search-icon {
border-style: outset;
}

search

user_14360227 · Answer

You can easily do it with jQuery!

To form the jQuery code in a sentence:

If Input not empty = show "X".

If click on "X" input value = empty

$(".clearable").each(function() {
  
  const $inp = $(this).find("input:text"),
      $cle = $(this).find(".clearable__clear");

  $inp.on("input", function(){
    $cle.toggle(!!this.value);
  });
  
  $cle.on("touchstart click", function(e) {
    e.preventDefault();
    $inp.val("").trigger("input");
  });
  
});

.clearable{
  position: relative;
  display: inline-block;
}
.clearable input[type=text]{
  padding-right: 1em;
  box-sizing: border-box;
}
.clearable__clear{
  display: none;
  position: absolute;
  right:0; top:0;
  padding: 0 8px;
  font-style: normal;
  user-select: none;
  cursor: pointer;
}
.clearable input::-ms-clear {  /* Remove IE default X */
  display: none;
}

/* 
Font Size
*/

input {
  font-size: 30px;
}

.clearable__clear {
  font-size: 40px
}

×

How do I add an X tag in a search bar

3 Answers