Skip to content

TechXcel.com - provides technical excellence...

Narrow screen resolution Wide screen resolution Increase font size Decrease font size Default font size default color orange color green color
You are here: Home arrow Blog arrow Text input with background image
Text input with background image PDF Print E-mail
(2 votes)
Written by Chetankumar Akarte   
Wednesday, 26 September 2007
Article Index
Text input with background image
Design CSS
Source Code

 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>


Now put the below piece of code in body section <body>… ___ …</body> tag of your web page. simply assign our input tag to the CSS class as…


<form id="loginForm" name="loginForm" method="post">
<input class="inputboxusr" type="text" size="15" name="usrname" />
<input class="inputboxpwd" type="password" size="15" value="" name="pass" />
<input class="inputboxSearch" type="text" size="15" value="" name="search" />
<input class="inputboxStar" type="text" size="15" value="" name="star" />
</form>



Last Updated ( Wednesday, 26 September 2007 )
 

Who's Online

User Login

PayPal Donation

Enter Amount:

Syndicate

TechXcel's Friends

Tutorials Garden
Wicolorz
pixel2life

Text Link Add

Statistics

Members: 276
News: 60
Web Links: 6
Visitors: 348553

Google Seach

Google AdSense

TechXcel Referrals

TechXcel's Sponcer...