如何设置标签的样式以保持在输入的顶部

Question

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

Sample image which shows an input element with an icon image in it!

Answer 1

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

e.g。

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

example

Answer 2

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

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

如果您需要占位符文字，则会有placeholder属性。

Answer 3

您可以尝试:after和@font-face。请点击here。