当前位置：文江博客话题详情

将两个图标放入输入字段内

发布于 2025-01-18 06:01:41 字数 229 浏览 0 评论 0原文

如何将两个图标放在输入元素中？这两个图标都应可单击。如果有用的话，我已经安装了React-Enantic-UI和Uikit。谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

聊慰 2025-01-25 06:01:41

最简单的方法是不要将图标放在输入字段中，而是将一个带有AA前缀，输入和后缀的容器样式。从输入中删除所有样式，然后像输入一样样式容器。

<div class="input">
  <span class="prefix"><i>YOUR ICON</i></span>
  <input />
  <span class="suffix"><i>YOUR ICON</i></span>
</div>

<style>
.input {
  display: flex;
  gap: 1rem;
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 0.5rem 0;
}

input {
  all: unset;
}
</style>

这是我创建的一个小Codepen：
https://codepen.io/webfussel/pen/pen/pen/pen/rnypzyx

The easiest way is to not put the icons in the input field, but style a container with a a prefix, the input and suffix. Remove all stylings from the input and then style the container like an input.

<div class="input">
  <span class="prefix"><i>YOUR ICON</i></span>
  <input />
  <span class="suffix"><i>YOUR ICON</i></span>
</div>

<style>
.input {
  display: flex;
  gap: 1rem;
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 0.5rem 0;
}

input {
  all: unset;
}
</style>

Here is a small codepen I created:
https://codepen.io/webfussel/pen/rNYPzyX

回复收藏 0 原文

~没有更多了~