Loading Page
Toolbar
U-Trade tutorials
Hello Guest
Links
Google Search
search
categories
css
css
    »   Form Components
    »   Buttons
    »   Transparency
html
html
javascript
javascript
photoshop
photoshop
php
php



Paypal
sitemap
contact
request tutorial
recommends
Do you have something to do in code, design or animation and you don't know how?
Send us an e-mail and will do a tutorial which will solve your problem.

10 Random Tutorials from all categories and subcategories
tutorials U-Trade
tutorials U-Trade
Effects for text box : U-Trade
+ Share and Enjoy
Author: Cristea Iulian



Vote up
Vote down
Vote this article

Why use the same styles for your textbox like everybody else? You can customize yourself very easily with a few cascading style sheets.

There are a few examples but you can create your own and of course with other colors.









Here are both: CSS and HTML code for this: 

<style type="text/css">



.borderEffect
{
	background-color:#FFFFCC;
	color:#A05A3D;
	margin:0px;
	padding:0px;
	border:1px solid #FFCC00;
}
.borderEffect:hover
{
	background-color:#FFCC89;
	color:#A05A3D;
	margin:0px;
	padding:0px;
	border:1px solid #A05A3D;
}
.secondaryBorderEffect
{
	background-color:#FFFFCC;
	color:#A05A3D;
	margin:0px;
	padding:0px;
	border:3px outset #FFCC00;
}
.secondaryBorderEffect:hover
{
	background-color:#FFFFCC;
	color:#A05A3D;
	margin:0px;
	padding:0px;
	border:3px inset #FFCC00;
}
.thirdBorderEffect
{
	background-color:#FFFFCC;
	color:#A05A3D;
	margin:0px;
	padding:0px;
	border:3px double #FFCC00;
}
.thirdBorderEffect:hover
{
	background-color:#FFFFCC;
	color:#A05A3D;
	margin:0px;
	padding:0px;
	border:3px ridge #FFCC00;
}
.fourthBorderEffect
{
	background-color:#FFFFCC;
	color:#A05A3D;
	margin:0px;
	padding:0px;
	border:1px dotted #A05A3D;
}
.fourthBorderEffect:hover
{
	background-color:#FFFFCC;
	color:#A05A3D;
	margin:0px;
	padding:0px;
	border:1px dashed #A05A3D;
}


</style>


<input type="text"class="borderEffect" />
<input type="text" class="secondaryBorderEffect" />
<input type="text" class="thirdBorderEffect"/>
<input type="text" class="fourthBorderEffect"/>



+ post a comment


Thank you for help
2008-08-14 11:55:57
Celebrate


sitemap   |   terms and conditions   |   contact
U-Trade © All rights reserved 2006-2008 | Effects for text box : U-Trade : U-Trade Tutorials