CODEWITHSUNDEEP
htmlcsstextboxicons
resontant81
resontant81

Reputation: 39

icon inside textbox html css

So, right now I have a registration form where a person has to enter their username, first name, last name etc.

I'm playing around with some CSS and thought it would be a nice idea to have some icons in the textboxes, however I cant seem to get it to work.

This is the code I have for the HTML:

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

And this is the code that I have for the CSS:

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

Any idea what I's doing wrong?

Thanks!

Upvotes: 0

Views: 13146

Answers (1)

gblock
gblock

Reputation: 604

Yes. left and no-repeat are part of background. Try this:

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

Make sure that the image/path is correct and no other css rule is overriding this.

Edit: try with an inline image:

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

Demo: http://codepen.io/anon/pen/dPgpKv

Upvotes: 1

Related Questions