Question 45127 in Html Question posted in
Some basic documentation can be found here.

Hide search bar image when there is an input – Html

I have put an image into my search bar as a placeholder. I am hiding it with input:focus, but that will cause it to reappear when I unclick it. Is there a way to only hide it, and keep it hidden when there is an input in the search bar?

The image reappears on unfocus and load of new page.

        function myFunction() {
          var input, filter, ul, li, a, i;
          input = document.getElementById("mySearch");
          filter = input.value.toUpperCase();
          ul = document.getElementById("myMenu");
          li = ul.getElementsByTagName("li");
          for (i = 0; i < li.length; i++) {
            a = li[i].getElementsByTagName("a")[0];
            if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
              li[i].style.display = "";
            } else {
              li[i].style.display = "none";
            }
          }
        }
input {

  border: 0px;
  outline: none;
  border-bottom:3px solid #00A7E0;
  width: 90%;
  background-image: url("../images/searchImage.png");
  background-repeat: no-repeat;
  background-size: 25%;
  padding: 10px;

}

input:focus {

  background-image: none;

}
 <input type="text" id="mySearch" onkeyup="myFunction()" onfocus="removeAttr()"  title="Type in a category">
Tags:

2

Answers


  1. 0

    You can write a function that adds a specific className to myFunction in onkeyup if there is no input value. And in the css part, you can make the background-image disappear when there is a specific className

    Example

    HTML

     <input type="text" id="mySearch" onkeyup="myFunction()" onfocus="removeAttr()" title="Type in a category"/>

    CSS

    input {
  border: 0px;
  outline: none;
  border-bottom:3px solid #00A7E0;
  width: 90%;
  background-image: url("../images/searchImage.png");
  background-repeat: no-repeat;
  background-size: 25%;
  padding: 10px;

}

input:focus {

  background-image: none;

}
.no-background-image {
  background-image: none;
}

    Javascript

    const className = "no-background-image"
const mySearch = document.getElementById("mySearch")

mySearch.onchange = function(event) {
  
  if(event.target.value && !mySearch.classList.contains(className)){ 
    mySearch.classList.add(className)
  }
  
  if(!event.target.value && mySearch.classList.contains(className)){
    mySearch.classList.remove(className)
  }
};

    I hope this helps!

    Login or Signup to reply.
  2. 0

    The best approach here; as has been suggested in the comments, is to do this using javascript. It is a good idea to add the image to the search bar using a css class:

    input {
    border: 0px;
    outline: none;
    border-bottom: 3px solid #00A7E0;
    width: 90%;
    padding: 10px;
}
        
input.with-image {
    background-image: url("./searchImage.png");
    background-repeat: no-repeat;
    background-size: 25%;
}
        
input:focus {
    background-image: none;
}

    Then adding that class to the input field in the HTML file:

    <input
   class="with-image"
   type="text"
   id="mySearch"
   onkeyup="myFunction()"
   onblur="removeImg()"
   onfocus="removeAttr()"
   title="Type in a category"
/>

    Finally, adding that removeImg function definition that handles removing the ‘with-image’ class from the input tag if it is not empty, otherwise it adds it back:

    function removeImg() {
    let input = document.getElementById("mySearch")
    var inputValue = input.value;
    if (inputValue) {
        input.classList.remove("with-image")
        console.log("removed");
    } else {
        input.classList.add("with-image")
        console.log("added");
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search