CSS如何在输入框的末尾有一个图像

Posted 2023-03-05

【中文标题】CSS如何在输入框的末尾有一个图像

【英文标题】：CSS how to have an image at the end of the input box

【发布时间】：2021-01-15 21:35:07

【问题描述】：

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

如何使用 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>

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

【问题讨论】：

这能回答你的问题吗？ html button with search icon?

【参考方案1】：

您可以使用background-image、background-position 来执行此操作，检查我的 sn-p 以了解我到底做了什么。 我认为你也可以对位置::after、::before 做同样的事情。

input 
  display:block;
  margin: 5px 5px 5px 5px;


#login-form 
  margin: 10px 0px 0px 20px;


#password-input 
  background: url(data:image/jpeg;base64,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) no-repeat right top;
  background-size: 15px 15px;
  padding-right: 15px;

<form id="login-form">
  <input id="password-input" type="password"> 
</form>

【讨论】：

谢谢，这就是我要找的东西！！！如果单击图像时它应该像按钮一样怎么办？在这种情况下如何实现？

@user2294434 欢迎您，先生，如果您只需将图标放在按钮标签中，这是可能的。查看此代码以获取更多信息：jsfiddle.net/fs39bxvm/2 如果有用，请接受我作为答案:)