文本框内的图标 html css

Question

所以，现在我有一张注册表，一个人必须输入他们的用户名、名字、姓氏等。

我正在尝试一些 CSS，我认为在文本框中添加一些图标是个不错的主意，但我似乎无法让它工作。

这是我为 HTML:

准备的代码

<input id ="regtxt" type="text" placeholder="Username" name = "user" maxlength="9"/>

这是我为 CSS:

准备的代码

#regtxt{
background-image:url('images/usericon.png');
left:no-repeat;
}

知道我做错了什么吗？

谢谢！

Answer 1

是的。 left 和 no-repeat 是 background 的一部分。试试这个：

#regtxt{
   background-image:url('images/usericon.png') left center no-repeat;
}

确保 image/path 正确并且没有其他 css 规则覆盖它。

编辑：尝试使用内联图像：

#regtxt{
  background:url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7) right center no-repeat;
}

演示：http://codepen.io/anon/pen/dPgpKv

文本框内的图标 html css

icon inside textbox html css

html

css

textbox

icons