Adding icons to input forms, and starting the input after the icon.

Problem

This will be a simple question for some of you but I am not the best with CSS and styling, I much prefer backend development. Basically I am styling a login form, and I want it to look like this:

enter image description here

the background, sign in button are all good. simples.

I have used some CSS and can fit an icon into the input, but when the user starts off typing, it types over the icon. What I want to do is have the icon section seperated and the user startes typing after the green line.

#password {

    background-image:url('../images/pw_icon.png');
    background-repeat:no-repeat;
    height: 30px;
}

That is the CSS I have so far. I have seen this done but can't find any examples after a few Google searches.

Can anyone direct me to an example or have some words to point me in the correct direction?

Problem courtesy of: Bohdi

Solution

CSS

#password {
    background-image:url('../images/pw_icon.png') no-repeat center left;
    height: 30px;
    padding-left: 30px;
}

This should work for you.

Solution courtesy of: James Coyle

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.