在边框内的文本字段中添加自定义图标

在网页设计中，为文本字段（如输入框）添加自定义图标是一种常见的增强用户体验的方法。这种设计可以帮助用户更好地理解输入框的用途，或者提供一个直观的操作入口。

基础概念

CSS Sprites：一种CSS图像合并技术，可以将多个小图标合并到一张大图中，通过CSS的background-position属性来显示需要的图标部分。
SVG图标：使用可缩放矢量图形（SVG）作为图标，因为它们可以无损缩放，非常适合响应式设计。
伪元素：使用CSS的:before或:after伪元素可以在元素的内容前后插入内容，常用于添加图标。

优势

提升视觉效果：图标可以使界面更加生动和专业。
增强可用性：图标可以作为视觉提示，帮助用户理解功能。
节省空间：相对于文本标签，图标占用的空间更少。

类型

前置图标：图标显示在输入框内部的前方。
后置图标：图标显示在输入框内部的后方。
悬浮图标：当用户鼠标悬停在输入框上时显示的图标。

应用场景

搜索框：通常在搜索框左侧放置放大镜图标。
邮箱输入：在邮箱输入框左侧放置信封图标。
密码输入：在密码输入框右侧放置眼睛图标，用于切换密码的可见性。

实现方法

以下是一个使用CSS伪元素和SVG图标实现前置图标的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Icon in Input Field</title>
<style>
  .input-container {
    position: relative;
    display: inline-block;
  }
  .input-container input {
    padding-left: 30px; /* 留出图标空间 */
  }
  .input-container:before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>');
    background-repeat: no-repeat;
  }
</style>
</head>
<body>

<div class="input-container">
  <input type="text" placeholder="Search...">
</div>

</body>
</html>