Having an image instead of a search button in a search engine, integrating it in the search bar

问题

I am a student working on a project and I am doing backend and I dont have too much experience with html and css. What we do is creating a search engine and giving it different kind of inputs, but we also decided to have an optional front page of our web engine. What I am asking for is someone to give me a hint or help me with make my search_icon.png visible, because for a reason I can't make it shown, and secondly to put it in the search bar which is the main reason I am writing here. I tried many things for 2 hours, like changing the javascript file, index file and ofc css, but I can't make it work. I am submitting the code under this :)

Don't be mad to a 2 months software development student! I hope you are all safe and negative!

/* jshint esversion: 6 */

document.getElementById('searchbutton').onclick = () => {
  fetch("/search?q=" + document.getElementById('searchbox').value)
    .then((response) => response.json())
    .then((data) => {
      let message;
      if (data.length === 0) {
        message = "<p>No web page contains the query word.</p>";
      } else {
        message = "<p>" + data.length + " websites retrieved</p>";
      }
      document.getElementById("responsesize").innerHTML = message;
      let results = data.map((page) =>
          `<li><a href="${page.url}">${page.title}</a></li>`)
        .join("\n");
      document.getElementById("urllist").innerHTML = `<ul>${results}</ul>`;
    });
};

@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;800&display=swap');
* {
  box-sizing: border-box;
}

body {
  font-family: 'Sen', sans-serif;
  background-color: #2A2E37;
  width: 25em;
  margin: 0 auto;
}

#content {
  background-color: #2A2E37;
  padding-top: 25em;
}

h1 {
  font-size: 2.2em;
  font-weight: 800;
  color: #02e9ca;
  text-align: center;
}

h2 {
  font-size: 1.3em;
  font-weight: 400;
  color: #F0F8FF;
  text-align: center;
}

input {
  width: 100%;
  padding: 1.2em;
  margin-top: 1em;
  background-color: transparent;
  transition: transform 250ms ease-in-out;
  background-image: url(search_icon.png);
  background-repeat: no-repeat;
  background-size: 1.2em;
  background-position: 95% center;
  border-radius: 5em;
  border: 0.1em solid #6d9ec9;
  transition: all 250ms ease-in-out;
  font-family: 'Sen', sans-serif;
  color: #F0F8FF;
  font-size: 1em;
  letter-spacing: 0.1em;
}

input::placeholder {
  font-family: 'Sen', sans-serif;
  color: #02e9ca;
  opacity: 60%;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

input:hover,
input:focus {
  padding: 1.2em;
  outline: 0;
  border: 0.1em solid transparent;
  border-bottom: 0.05em solid #02e9ca;
  border-radius: 0;
  background-position: 100% center;
}

<html>

<head>
  <title>Computer Engineered Scalable Search Engine Programmed with Ideal Technology</title>
  <script src="/code.js" defer></script>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css" />
</head>

<body>

  <div id="content">
    <h1>MY ENGINE</h1>
    <h2>Works flawlessly, give it a try!</h2>
    <div>
      <input id="searchbox" type="text" placeholder="Don't search here...">
      <img id="searchbutton" alt="search icon" src="search_icon.png">
    </div>
  </div>

</body>

</html>

来源：https://stackoverflow.com/questions/65173347/having-an-image-instead-of-a-search-button-in-a-search-engine-integrating-it-in

标签

javascript

html

css