CSS 将图标放在表单中的输入元素内

在设计表单时，往往需要在输入框内插入一些图标以增强用户体验。本文将介绍如何使用 CSS 在输入框内嵌入图标。

在输入框前或后插入图标

在输入框前或后插入图标是最简单的方法，只需要使用 CSS 中的 :before 和 :after 伪元素即可。

input[type="text"]::before {
  content: "\f007"; /* 使用 Font Awesome 图标 */
  font-family: "Font Awesome 5 Free";
  position: absolute;
  left: 10px;
  top: 10px;
}

input[type="text"] {
  padding-left: 30px;
}

在上述例子中，使用了 Font Awesome 库中的一个图标，并将其插入到输入框前。该图标的 Unicode 编码为 \f007，需要指定其字体为 "Font Awesome 5 Free"。同时，需要将输入框的 padding-left 值调整为图标宽度的大小（本例中为 20px + 10px）。

同样的，您可以使用 ::after 伪元素来在输入框后插入一个图标，方法与前面类似。

在输入框内部插入图标

如果需要将图标放在输入框内部，您需要将输入框设置为相对定位（position: relative），并在其中插入一个绝对定位（position: absolute）的元素。

<div class="icon-input">
  <input type="text" placeholder="请输入搜索关键字">
  <i class="fas fa-search"></i>
</div>

.icon-input {
  position: relative;
}

.icon-input input[type="text"] {
  padding-left: 30px;
}

.icon-input i {
  position: absolute;
  left: 10px;
  top: 10px;
}

在上述例子中，我们首先创建了一个相对定位的容器，并将输入框和图标作为其子元素。然后将输入框的 padding-left 调整为图标的宽度大小，最后将图标设置为绝对定位，并通过 left 和 top 属性调整图标的位置。

需要注意的是，在这种方法下，输入框的样式可能会有所变化，比如圆角的方式等。

结语

通过本文，您可以学习到如何使用 CSS 在表单输入框中插入图标，以增强用户体验。祝您编写出更美观高效的表单！