HTML的input属性是一种非常重要的网页元素，可以让开发者在网页中添加各种不同种类的输入框，比如文本框、密码框、单选框、复选框等等。除了输入框的基本样式之外，开发者还可以通过CSS样式为输入框添加一些自定义的样式，比如背景色、边框样式、文本颜色等等。但是，我们有没有想过，如何为输入框添加自定义的图标呢？

在这篇文章中，我们将会介绍如何使用HTML的input属性为网页输入框添加自定义图标。我们主要会介绍两种方法：一种是使用CSS样式为输入框添加背景图片；另一种是使用HTML5和CSS3的新功能设置输入框的类型和属性，并通过伪元素来为输入框添加图标。

方法一：使用背景图片添加自定义图标

首先，我们先来看一下如何使用CSS样式为输入框添加背景图片。这种方法适用于大多数浏览器，并且兼容性比较好。

我们可以使用如下代码：

```

input[type="text"] {

background-image: url("image.png");

background-repeat: no-repeat;

background-position: right center;

padding-right: 20px;

```

在上面的代码中，我们定义了一个文本框类型的输入框，并为其设置了一个名为“image.png”的背景图片。我们通过设置background-repeat：no-repeat;来防止图片重复出现，并使用background-position：right center;来将图片放置在输入框的右边中央。 padding-right:20px;则用来为输入框右侧留出一些空白，以免文字和图标重叠。

在这种方法中，您可以通过更改 background-position属性的值来改变图标的位置。如果希望图标居中且不带文字可以使用以下代码：

```

input[type="text"] {

background-image: url("image.png");

background-repeat: no-repeat;

background-position: center;

text-indent: 20px;

```

在上面的代码中，我们使用text-indent:20px;将文本向右缩进了20像素，以留出足够的空间放置背景图片。我们将背景图片设置在中央，从而使它居中显示。

方法二：使用HTML5和CSS3的新功能

除了上面介绍的使用背景图片的方法之外，我们还可以使用HTML5和CSS3的新功能来为输入框添加图标。这种方法使得代码更加整洁，同时也可以实现更多的效果。

在HTML5中，我们可以为输入框设置很多不同的类型和属性，比如说：type、placeholder和required。type属性表示输入框的类型，可以是text、email、url、tel、number等等，可以根据自己的需求进行设置。placeholder属性表示输入框的提示文本，可以在用户没有输入任何内容时显示在输入框中。required属性表示输入框是否必填，如果用户没有输入内容，就会显示一个错误提示。

而在CSS3中，我们可以通过伪元素:before和:after为元素添加内容。我们可以使用:before来为输入框添加图标，使用:after来为输入框添加边框或者其他特效。

为了实现为输入框添加图标的效果，我们可以使用如下代码：

```

input[type="text"] {

position: relative;

padding-left: 20px;

input[type="text"]::before {

content: "图标";

font-family: "FontAwesome";

font-size: 20px;

position: absolute;

left: 0;

top: 50%;

transform: translateY(-50%);

```

在上面的代码中，我们首先为输入框设置了一个左侧边距 padding-left:20px;，然后使用伪元素:before来添加图标。我们需要定义图标的内容 content，使用字体库 font-family，设置图标大小 font-size，使用绝对定位 position:absolute，使图标相对于输入框左侧对齐 left:0;，使用 top:50%; transform:translateY(-50%); 将图标垂直居中。

在上述代码中，我们使用了font-awesome字体库来设置图标，需要我们将所需的字体库引入到页面中。如果您不想使用第三方字体库，可以将图标保存为图片，并将其放在public文件夹中，再通过background-image来引入图标。

总结

通过这两种方法，我们可以为网页输入框添加各种自定义图标。使用背景图片的方法兼容性比较好，适用于大多数浏览器；而使用HTML5和CSS3的新功能则整洁简洁，可以实现更多的效果。通过这些方法为输入框添加图标，可以使得输入框更具有吸引力和美观性，同时也可以为用户提供更加友好和便捷的输入体验。