在输入字段中放置两个图标

Question

如何在输入元素中放置两个图标？两个图标都应该是可点击的。如果有用的话，我已经安装了 react-semantic-UI 和 uikit。谢谢。

Answer 1

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

<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>

这是我创建的一个小代码笔： https://codepen.io/webfussel/pen/rNYPzyX