html - 文本框内的图标 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;
}

确保图像/路径正确并且没有其他 css 规则覆盖它。

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

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

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