html - 如何设置标签样式以保持在输入之上

Question

我只是想知道是否可以在输入元素的顶部放置一个样式标签。我已经看到放置在输入元素内的图像以显示该元素接受哪种输入。例如，在登录表单中，用户名用用户图标表示，密码用钥匙图标表示。有没有办法可以放置这样的标签。！

示例图像，其中显示了一个带有图标图像的输入元素！

Answer 1

您可以为其设置背景图像。

例如

.label {
    background: transparent url('image path') left top no-repeat;
}

例子

Answer 2

对于图标，只需添加background-image到输入和小填充，这样您的文本就不会与图标发生冲突：

<input style="background-image: url(key.png) top left no-repeat;
              padding-left: 20px;">

如果您想要占位符文本，则有一个placeholder属性。

Answer 3

你可以试试:after和@font-face。请点击这里。