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

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>

Answer 2

我不知道我的问题是否正确，但我认为你可以尝试这种方式

.btn-image {
    background: url("https://www.adiumxtras.com/images/thumbs/anonymous_1_39536_8261_thumb.png") no-repeat;
    background-size: cover;
    width:50px;
    height: 50px;
    border-radius: none;
    border:none;
    color: transparent;
}
.search-field {
    padding: 20px;
    background-color: #252528;
    color: #fff;
}

<div>
   <input type="text" placeholder="search..."
   class="search-field">
    <input type="submit" class="btn-image">
 </div>