如何在輸入標簽中合並提交按鈕？

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>