Put icon inside input element in a form

html css forms input icons
akif picture akif · May 27, 2009 · Viewed 649.8k times · Source

How do I put an icon inside a form's input element?

Screenshot of a web form with three inputs which have icons in them

Live version at: Tidal Force theme

Answer

Dan Lew picture Dan Lew · May 27, 2009

The site you linked uses a combination of CSS tricks to pull this off. First, it uses a background-image for the <input> element. Then, in order to push the cursor over, it uses padding-left.

In other words, they have these two CSS rules:

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

Related questions

How to remove the arrows from input[type="number"] in Opera

Just looking to remove these arrows, convenient in certain situations. I would like to preserve the browser's awareness of the content being purely numeric however. So changing it to input[type="text"] is not an acceptable solution. Now that Opera …

Read More
Clicking the text to select corresponding radio button

I'm creating a quiz web application using PHP. Each question is comprised of a separate <label> and has 4 possible choices, using radio buttons to allow the user to select his/her answer. The current HTML for a single …

Read More
Radio Button "Checked=checked" not changing when option changed

I've created a basic 2 radio button form as seen in my example below. Observing the browser rendering, we see item 1 selected. We inspect item 1 and 2. When I click item 2, I expect item 1's checked=checked to be remove. I expect …

Read More