javascript - 如何合并输入标签内的提交按钮？

Question

我有一个带有背景图片的输入标签

HTML:

<form><input placeholder="Input" id="exampleInput" type="text"></form>

CSS:

#exampleInput{
    background: url(graph.ico) no-repeat scroll 95% 10px;
}

我想将该背景图像本身用作提交按钮。我该怎么做？

编辑

现在的样子是这样的

https://screenshots.firefox.com/3MMfNTbHxKVuFw1c/localhost

我不想改变外观，但我想为输入标签内的背景图像添加一些功能，以便它可以点击。

Answer 1

根据您的修改更新答案:

你可以这样做。您将不得不弄乱您的特定尺寸。我将输入和图像包装在 span 容器元素中并设置 position: relative。从那里，我将图像元素设置为 position: absolute;，然后相对于 span 元素相应地定位它。

#input-container {
  position: relative;
}

#myImage {
  position: absolute;
  right: 12px;
  top: 50%;
  bottom: 50%;
  margin: auto;
}

#myImage:hover {
  cursor: pointer;
}

<span id="input-container">
  <input type="text">
  <img id="myImage" src="http://via.placeholder.com/15x15" alt="">
</span>
    
    
     

原始答案

你可以使用图像元素

$('#myImage').on('click', (e) => {
  $('#myForm').submit();
});

$("#myForm").on("submit", function(e) {
  e.preventDefault();
  console.log('form was submitted');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input placeholder="Input" id="exampleInput" type="text">
  <img id="myImage" src="graph.ico" alt="">
</form>