📌  相关文章
📜  CSS将图标放在表单中的输入元素内(1)

📅  最后修改于: 2023-12-03 14:40:23.114000             🧑  作者: Mango

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

在网页设计中，常常需要在表单输入框内加入图标，以提高界面美观度和用户体验。那么，如何用 CSS 来实现在表单输入框内添加图标呢？

目录
使用 ::before 伪元素

首先，我们可以利用 CSS 的 ::before 伪元素在表单输入框前加入图片。

/* 加入搜素图标 */
.search-input::before {
  content: url("searchIcon.png");
}

这里的 content 属性通过 url() 方法引入图片。将类名 .search-input 加在对应的输入框上，即可看到图标已经在输入框内加载。

控制图标位置和大小

有时候我们需要控制图标的位置和大小，这可以通过 CSS 的定位和尺寸属性来实现。

/* 使用相对定位 */
.search-input {
  position: relative;
}

/* 控制图标位置 */
.search-input::before {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

/* 控制图标大小 */
.search-input::before {
  width: 16px;
  height: 16px;
}

这里的 position: relative 和 position:absolute 分别用来在输入框中建立父子定位关系，并控制图标相对于输入框的位置。top 和 left 属性分别控制图标距离输入框上下和左侧的距离。 transform: translateY(-50%) 属性用来将图标垂直居中。最后，通过设置 width 和 height 属性控制图标的大小。

使用 fontawesome 图标库

除了以上方法，我们还可以使用 fontawesome 图标库，该库提供了可定制的图标，使用灵活方便。

以搜素框为例，先引入 fontawesome 图标库：

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-q8i/X+965DzO0rT7abKkatQWgx/9MymNUbT7W/5UfYjMIVLrpuG4UJesdQRVo49T" crossorigin="anonymous">
</head>

然后，可以在 HTML 中直接使用图标字体：

<!-- 直接使用fontawesome图标字体 -->
<div class="search">
    <input type="text" class="search-input fa" placeholder="Search">
    <button type="submit" class="search-button fa fa-search"></button>
</div>

注意，这里的 search-input 类名中还包含了 fa 用来添加 fontawesome 的图标字体。同样，可以添加其他类似的图标字体样式。这种方法可以简化代码，减少 HTTP 请求，同时提供了更多的可定制性。