css - HTML + CSS 如何将按钮作为文本框内的图像

Question

我有一个输入框，它用于搜索。在盒子的末端，而不是外面，在右侧盒子的末端我想要一个也应该像按钮一样的图像

如何使用 css 实现这一点。在此先感谢，我对 css 很陌生。下面是我的代码：

<div class="group1">
<input type="text" class="form1" id="Search" placeholder="PO Quick Search..."> -- **SearchBox**
<button class="btn" type="button" id="btnSearch" onclick=""> -- **Button next to search box, which is wanted inside**
</button>
</div>

图片和按钮应该是这样的，最后的图片应该是可点击的

标签： cssbuttonhtmlbutton

Answer 1

这可以是您问题的答案，我在这里使用了 font-awesome，您可以将其替换为图像。

HTML

<div class="group1">
     <input type="text" class="form1" id="Search" placeholder="PO Quick Search...">
     <button class="btn" type="button" id="btnSearch" onclick=""><i class="fa fa- 
     search" aria-hidden="true"></i>
     </button>
</div>

CSS：

button{
     background-color:transparent;
     border:none;
     font-size:15px;
     margin-left:-7%;
}