Text input with background image

In this article we are going to see how to add Text input with background image. We're now going to see how you can create an input box like the one you see below:

Live Demo...

All we need in order to create an input box like above we required image which we want to use as background and some CSS code.

You can find required images with Source code download section.
Put following piece of code in the head section, <head>… ___ …</head> tag of your web page. This input box is simply created by adding a background image to the input tag. You can also use padding so that the text doesn't overlap the background image. I have used it for inputboxSearch and inputboxStar

This is an example of the CSS:

(Code 1)

<style type='text/css'>

.inputboxUsr {
width: 150px;
margin: 0 0 1em 0;
border: 1px solid #333333;
background:url('img/bginputusr.gif') no-repeat right top;
}

.inputboxPwd {
width: 150px;
margin: 0 0 1em 0;
border: 1px solid #333333;
background:url('img/bginputpwd.gif') no-repeat right top;
}

.inputboxSearch {
width: 150px;
margin: 0 0 1em 0;
border: 1px solid #333333;
background:url('img/magnifying-glass.gif') no-repeat right center;
padding-right:20px;
}

.inputboxStar {
width: 150px;
margin: 0 0 1em 0;
border: 1px solid #333333;
background:url('img/lg_input_full.gif') no-repeat left center;
padding-left:20px;
}

</style>