Today it’s time to learn how to spice up input fields in a form with images.

There are at least two reasons for doing this… The first and obvious is that it will look better :-) The second reason is that you can help your users to understand what they should write in the different fields.

Before I talk further you should look at this so you understand what I talk about:

Login

Isn’t it really nice looking?? :-)

You can write “username” and “password” infront of the fields, but I guess your visitors will understand that anyway…

There are some simple things you have to do for this. Ofcource it’s done in css and you only need to change the input field and add class=”username” for the first field and class=”pwd” to the second.

Basicly you say in the css that the fields should have a background image. After that you need to make sure the text the visitor write don’t get ontop of the image which it does default. This is done with padding-left: 30px; that says that the text should start after 30px.

You also need to make sure that only One image is shown as background. Because by default the whole input field is filled with images. This is easily done by stating that it should “not reapeat” and be to the left center.

Depending on the height of your image you might need to change the padding, but also the fields height. It’s just to try and play around a little :-)

To wrap this tutorial up here is the css code.
Add it to your existing  style sheet and impress your visitors :-)

<style type=”text/css”>
input.user {
padding-left: 20px;
background: url(username.jpg);
background-repeat: no-repeat;
background-position: left center;
height: 25px;
}
input.pwd {
padding-left: 20px;
background: url(password.jpg);
background-repeat: no-repeat;
background-position: left center;
height: 25px;
}
</style>

Similar Posts:

  • Share/Bookmark