如何将图像添加到输入表单的右侧并使其作为搜索按钮工作

<form>
  <input type="text" id="search-input" placeholder="输入搜索内容">
  <button type="submit" id="search-button">
    <img src="search-icon.png" alt="搜索图标">
  </button>
</form>

#search-input {
  width: 200px;
  height: 30px;
  padding: 5px;
  border: 1px solid #ccc;
}

#search-button {
  width: 30px;
  height: 30px;
  background-image: url("search-icon.png");
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  cursor: pointer;
}

document.getElementById("search-button").addEventListener("click", function(event) {
  event.preventDefault(); // 阻止表单提交
  var searchInputValue = document.getElementById("search-input").value;
  // 执行搜索操作，可以使用AJAX发送搜索请求或其他操作
});