How to add a stylish icon into a (form) text box
Posted on September 22, 2008, Filled under HTML & CSS, 
Bookmark it
Greetings,
This CSS Code is useful if you need to add a stylish icon into a text box inside a form. Many sites use this sort of inputs. Here’s an example of a login page using this style:
To see how the icons are added in the input text box check this css code:
.textbox_username
{
background: #ffffff url('images/icon_username.png') no-repeat;
background-position: 1 1;
padding-left: 19px;
border: 1px solid #999999;
border-top-color: #CCCCCC;
border-left-color: #CCCCCC;
color: #333333;
font: 90% Verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
height: 20px;
}
.textbox_password
{
background: #ffffff url('images/icon_password.png') no-repeat;
background-position: 1 1;
padding-left: 19px;
border: 1px solid #999999;
border-top-color: #CCCCCC;
border-left-color: #CCCCCC;
color: #333333;
font: 90% Verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
height: 20px;
}
The icon is used as a background which doesn’t repeat. The text will begin to fill after the icon. To do this I’ve used padding-left which has a value of 19px in this case.
This is an easy customizable code. You can change the font’s color, size & weight, the background’s position, the width & height of the text box etc.
To get the result showed above use this page (rounded corners work only for Mozilla browsers):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Stylish Icons in text boxes</TITLE>
<META name="Author" Content="Bit Repository">
<META NAME="Keywords" CONTENT="stylish, icons">
<META NAME="Description" CONTENT="How to add a stylish icon into a (form) text box">
<STYLE TYPE="text/css">
<!--
/*
Credits: Bit Repository
CSS Library: http://www.bitrepositiry.com/
*/
html, body
{
padding: 0;
border: 0px none;
}
/* Main DIV */
.main
{
width: 560px;
padding: 20px;
height: auto;
}
/* Left DIV */
.left
{
width: 140px;
margin: 0px;
padding: 0px;
float: left;
text-align: right;
}
/* Right DIV */
.right
{
width: 300px;
margin: 0px;
padding: 0px;
float: right;
text-align: left;
}
.area
{
clear: both;
width: 470px;
padding: 10px;
}
.info_fieldset
{
-moz-border-radius: 7px;
border: 1px #dddddd solid;
margin-bottom: 20px;
width: 550px;
}
.info_fieldset legend
{
border: 1px #1a6f93 solid;
color: black;
font-family: Verdana;
font-weight: none;
font-size: 13px;
padding-right: 5px;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 2px;
-moz-border-radius: 3px;
}
.textbox_username
{
background: #ffffff url('images/icon_username.png') no-repeat;
background-position: 1 1;
padding-left: 19px;
border: 1px solid #999999;
border-top-color: #CCCCCC;
border-left-color: #CCCCCC;
color: #333333;
font: 90% Verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
height: 20px;
}
.textbox_password
{
background: #ffffff url('images/icon_password.png') no-repeat;
background-position: 1 1;
padding-left: 19px;
border: 1px solid #999999;
border-top-color: #CCCCCC;
border-left-color: #CCCCCC;
color: #333333;
font: 90% Verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
height: 20px;
}
.button
{
border: 1px solid #999999;
border-top-color: #CCCCCC;
border-left-color: #CCCCCC;
background-color: white;
color: #333333;
font: 90% Verdana, Helvetica, Arial, sans-serif;
font-size: 11px;
-moz-border-radius: 3px;
}
-->
</STYLE>
</HEAD>
<BODY>
<center>
<div align="center" class="main">
<form name="login" method="post" action="">
<fieldset class="info_fieldset"><legend>Member Login</legend>
<div class="area"><div class="left">Username</div><div class="right"><INPUT class="textbox_username" type="text" name="name" value=""></div></div>
<div class="area"><div class="left">Password</div><div class="right"><INPUT class="textbox_password" type="password" name="password" value=""></div></div>
<div class="area"><div class="left"> </div><div class="right"><INPUT class="button" type="submit" name="submit" value="Login"></div></div>
<div class="area"></div>
</fieldset>
</form>
</div>
</center>
</BODY>
</HTML>
Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!
- September 22, 2008
- article by Gabriel C.
- Leave a reply!
Sponsors
Related Posts
-
Creating stylish pagination linksat September 21, 2008 with 3 comments
-
PHP: How to center a text on an image using GDat September 9, 2008 with 4 comments
-
Simple AJAX Contact Form with jQuery and PHP Validation
at September 2, 2008 with 209 comments
-
Creating a CSS TableLess Form (using Labels or DIVs)
at September 1, 2008 with 7 comments
-
How to emphasize specific words from a string (text)
at September 6, 2008
- sure helps...i am a php newbie thanks
on March 15th, 2010 by SeoWiz Kid
- buggy , doesnt send mail , not enugh help . is there any cofiguration on
on March 15th, 2010 by lansen
- thank you verry much,good job! but when i change the dimension and the number of character
on March 14th, 2010 by rami
- Hey Vedrin, did you find your answer about getting all matches on the pages? You
on March 13th, 2010 by nonecantest
-
20 Free Fonts Ideal for Creative Logo Designby Peter Olexa on March 16, 2010
-
Light, Flexible, Browser-friendly & Easy to use Framework: EZ-CSSby Gabriel C. on March 14, 2010
-
Multi-touch Vector Gestural Icons: Scalable and Alterableby Gabriel C. on March 13, 2010
-
Facebook-style Lightbox/Modalbox powered by jQuery and MooToolsby Gabriel C. on March 12, 2010
Categories
- AJAX (17)
- Design (9)
- Flash (19)
- Freebies (3)
- General (3)
- Graphics (11)
- HTML & CSS (27)
- Frameworks (7)
- JavaScript (111)
- Frameworks (4)
- JQuery (47)
- MooTools (13)
- Photoshop (2)
- PHP (102)
- Reviews (3)
- Statistics (2)
- Web Tools (6)
- Wordpress (13)
Advertisements
Tag Cloud
- ajax login
- alphabetical
- array
- auto grow
- base
- calculate
- captcha
- chart
- charts
- countdown
- css framework
- delimiters
- documents
- dropdown
- extension
- extract
- filename
- fonts
- form
- gd library
- icon set
- iphone
- lightbox
- mod_rewrite
- percent
- Photo Gallery
- picker
- random
- remove
- script.aculo.us
- search
- shopping cart
- skin form elements
- slider
- syntax highlighter
- tableless
- to-do
- validate
- web analytics
- web fetch
- WYSIWYG
- zoom