|
|
|
|||||||
 |
|
|
Thread Tools | Search this Thread | Display Modes |
|
#1
07-18-2005, 19:04
|
||
|
Customizing input text boxes
This tutorial will show how to change the color of an input box or textarea when they are active. This is very simple and is done using CSS. So here we go!
The first part is the CSS code, this goes in the between the head tags of your page: HTML Code:
<style type="text/css">
.input {
background-color: #656D78;
border: 1px solid #333333;
color: #cccccc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.input:focus {
background-color: #3D4D64;
border: 1px solid #333333;
color: #cccccc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
</style>
The highlighed text above is the stuff you have to copy. The red bits are the parts you have to customize to suit your needs. The first class, ".input" is the code which sets the colours of the text box when it doesn't have focus(i.e. when they are not active). The second class, ".input:focus" sets the colours of the text boxes when they are active. Simple really. Now for the html code: Instead of using the features on dreamweaver, or frontpage, or anything that you use to make an input box, just copy this code wherever you want your tailor-made box. , red bits are customizable HTML Code:
<input name="tagname" class="input" maxlength="20">
__________________
http://img76.imageshack.us/img76/6450/sc2but4ng.gif | http://img495.imageshack.us/img495/...ogorwtan0je.gif | <a href="http://webtools.sc2.info"><img src="http://img129.imageshack.us/img129/8682/sc2webtan7ju.gif" border="1" width="100" alt="Free Webtools for all" /></a> | <a href="http://www.indexrated.com"><img src="http://img398.imageshack.us/img398/4813/listed1pb.gif" border="1" width="100" alt="Index Rated Directory - Rating Quality Sites" /></a> Get all Games,Apps and Wallpapers Nokia, Samsung and Sony Erricson!! |
|
|
|
|
|
#2
07-19-2005, 08:05
|
||
|
Re: Customizing input text boxes
thx for the code...
|
|
|
|
|
|
|
| Thread Tools | Search this Thread |
| Display Modes | |
|
|
Linear Mode
