if you want to create an input box with an image which we want to use as background you just have to put the following code in the head part of your HTML program
HTML Code:
<style type='text/css'>
.inputbox1 {
width: 150px;
margin: 0 0 1em 0;
border: 1px solid #444444;
background:url('images/img1.gif') no-repeat right top;
}
.inputbox2 {
width: 150px;
margin: 0 0 1em 0;
border: 1px solid #444444;
background:url('images/img2.gif') no-repeat right top;
}
.inputbox3 {
width: 150px;
margin: 0 0 1em 0;
border: 1px solid #444444;
background:url('images/img3.gif') no-repeat right center;
padding-right:20px;
}
.inputbox4 {
width: 150px;
margin: 0 0 1em 0;
border: 1px solid #444444;
background:url('images/img1.gif') no-repeat left center;
padding-left:20px;
}
</style>
HTML Code:
After that you just have to input the following codes into the body of your html program
<form id="loginForm" name="Form1" method="post">
<input class="inputbox1" type="text" size="15" name="uname" />
<input class="inputbox2" type="password" size="15" value="" name="pwd" />
<input class="inputbox3" type="text" size="15" value="" name="src" />
<input class="inputbox4" type="text" size="15" value="" name="star" />
</form>
Bookmarks