Design Css Form Textfield

admin On April - 13 - 2011

In this tutorial we are going to design the form textfield, changing the border color, add square borders, adding gradient background to textfield

Lets start the Begining: Design 1

First of all we have to create the form and Textfield in html, Copy & Paste the below code in your <body> tag of your html file:

<form>
<input class="design1" size="45" value="A quick brown fox jumps over the lazy dog" name="textfield" type="text"  />
</form>

Styling the “design1″ Textfield

Okay, now we are going to design the “class=’design1′” Textfield, copy and paste the below code in your <head> tag of your html file or in you “.css” file:

.design1{
background-color:#fffff;
border:1px solid #dbdbdb;
padding:5px;
}

background-color: This is used for changing the background color of the Textfield.
border: This is used for changing the border color of the Textfield.

Your Design 1 will be look like this

Example

Design 2

Html code for Design 2:

<form> <input class="design2" size="45" value="A quick brown fox jumps over the lazy dog" name="textfield" type="text"  />
</form>

Styling the “design2″ Textfield

Css code for “class=’design2′” texfield:

.design2{
background-color:#fffff;
border:1px solid #dbdbdb;
padding:5px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
}

background-color: This is used for changing the background color of the Textfield.
border: This is used for changing the border color of the Textfield.
Some browser doesn’t support rounded corners borders, so we used “-webkit-border” and “-moz-border-radius” for multiple browser support, so in the above code “-webkit-border” is used for WebKit equivalent, and”-moz-border-radius” is used for Mozilla equivalent

Your Design 2 will be look like this

Example

Design 3

Html code for Design 3:

<form> <input class="design3" size="45" value="A quick brown fox jumps over the lazy dog" name="textfield" type="text"  />

</form>

Styling the “design3″ Textfield

Css code for “class=’design3′” texfield:

.design3{
background-color:#f0f0f0;
border:1px solid #dbdbdb;
padding:5px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
color: #000;
font-style:italic;
font-weight:bold;
}

background-color: This is used for changing the background color of the Textfield.
border: This is used for changing the border color of the Textfield.
font-style: This is used for changing the font style to Italic.
font-weight: This is used for changing the font weight to Bold.
Some browser doesn’t support rounded corners borders, so we used “-webkit-border” and “-moz-border-radius” for multiple browser support, so in the above code “-webkit-border” is used for WebKit equivalent, and”-moz-border-radius” is used for Mozilla equivalent

Your Design 3 will be look like this

Example

Design 4

Html code for Design 4:

<form> <input class="design4" size="45" value="A quick brown fox jumps over the lazy dog" name="textfield" type="text"  />

</form>

Styling the “design4″ Textfield

Css code for “class=’design4′” texfield:

.design4{
background-color:#fffff;
border:2px solid #dbdbdb;
padding:5px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
color: #093;
font-weight:bold;
font-style:italic;
}

Your Design 4 will be look like this

Example

Design 5

Html code for Design 5:


<form> <input class="design5" size="45" value="A quick brown fox jumps over the lazy dog" name="textfield" type="text"  />

</form>

Styling the “design5″ Textfield

Css code for “class=’design5′” texfield:

.design5{
background-color:#fffff;
border:2px solid #dbdbdb;
padding:5px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-bottomright: 8px;
color: #093;
font-weight:bold;
font-style:italic;
}

Your Design 5 will be look like this

Example

Design 6

Html code for Design 6:

<form> <input class="design6" size="45" value="A quick brown fox jumps over the lazy dog" name="textfield" type="text"  />

</form>

Styling the “design6″ Textfield

Css code for “class=’design6′” texfield:

.design6{
background-color:#eeeeee;
border:2px solid #999;
padding:5px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-bottomright: 8px;
color: #093;
font-size:15px;
font-weight:bold;
font-style:italic;
}

Your Design 6 will be look like this

Example

Design 7

Html code for Design 7:

<form> <input class="design7" size="45" value="A quick brown fox jumps over the lazy dog" name="textfield" type="text"  />

</form>

Styling the “design7″ Textfield

Css code for “class=’design7′” texfield:

.design7{
background-color:#eeeeee;
border-top:2px solid #dbdbdb;
border-right:2px solid #dbdbdb;
border-bottom:4px solid #ccc8cc;
border-left:2px solid #dbdbdb;
padding:5px;
color: #666;
font-size:15px;
font-weight:bold;
font-style:italic;
}

background-color: This is used for changing the background color of the Textfield.
border: This is used for changing the border color and border size of the Textfield.
font-style: This is used for changing the font style to Italic.
font-weight: This is used for changing the font weight to Bold.

Your Design 7 will be look like this

Example

Design 8

Html code for Design 8:

<form> <input class="design8" size="45" value="A quick brown fox jumps over the lazy dog" name="textfield" type="text"  />

</form>

Styling the “design8″ Textfield

Css code for “class=’design8′” texfield:

.design8{
background-color:#eeeeee;
border-top:2px solid #dbdbdb;
border-right:2px solid #dbdbdb;
border-bottom:4px solid #ccc8cc;
border-left:2px solid #dbdbdb;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topright: 8px;
padding:5px;
color: #666;
font-size:15px;
font-weight:bold;
font-style:italic;
}

Your Design 8 will be look like this

Example

Design 9

Html code for Design 9:

<form> <input class="design9" size="45" value="A quick brown fox jumps over the lazy dog" name="textfield" type="text"  />

</form>

Styling the “design9″ Textfield

Css code for “class=’design9′” texfield:

.design9{
background-color:#eeeeee;
border-top:1px solid #dbdbdb;
border-right:1px solid #dbdbdb;
border-bottom:1px solid #dbdbdb;
border-left:11px solid #ccc8cc;
padding:5px;
color: #666;
font-size:15px;
font-weight:bold;
font-style:italic;
}

Your Design 9 will be look like this

Example

Design 10

Html code for Design 10:

<form> <input class="design10" size="45" value="A quick brown fox jumps over the lazy dog" name="textfield" type="text"  />

</form>

Styling the “design10″ Textfield

Css code for “class=’design10′” texfield:

.design10{
background-color:#eeeeee;
border-top:1px solid #060;
border-right:1px solid #060;
border-bottom:1px solid #060;
border-left:11px solid #060;
padding:5px;
color: #666;
font-size:15px;
font-weight:bold;
font-style:italic;
}

Your Design 10 will be look like this

Example

Design 11

Html code for Design 11:


<form> <input class="design11" size="45" value="A quick brown fox jumps over the lazy dog" name="textfield" type="text"  />

</form>

Styling the “design11″ Textfield

Now we are going to add a gradient color background in text field, click here to view the bg and save it to your computer!
Css code for “class=’design11′” texfield:

.design11{
background-image:url(gradient1.png);
border:1px solid #85c2de;
padding:9px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
font-size:15px;
font-weight:bold;
color: #333;
}

background-image: This is used for adding background image to the Textfield.
border: This is used for changing the border color of the Textfield.
font-style: This is used for changing the font style to Italic.
font-weight: This is used for changing the font weight to Bold.
Some browser doesn’t support rounded corners borders, so we used “-webkit-border” and “-moz-border-radius” for multiple browser support, so in the above code “-webkit-border” is used for WebKit equivalent, and”-moz-border-radius” is used for Mozilla equivalent

Your Design 11 will be look like this

Example

Design 12

Html code for Design 12:

<form> <input class="design12" size="45" value="A quick brown fox jumps over the lazy dog" name="textfield" type="text"  />

</form>

Styling the “design12″ Textfield

Now we are going to add a gradient color background in text field, click here to view the bg and save it to your computer!
Css code for “class=’design12′” texfield:

.design12{
background-image:url(gradient2.png);
border:1px solid #88de85;
padding:9px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
font-size:15px;
font-weight:bold;
color: #333;
}

Your Design 12 will be look like this

Example

Design 13

Html code for Design 13:

<form> <input class="design13" size="45" value="A quick brown fox jumps over the lazy dog" name="textfield" type="text"  />

</form>

Styling the “design13″ Textfield

Now we are going to add a gradient color background in text field, click here to view the bg and save it to your computer!
Css code for “class=’design13′” texfield:

.design13{
background-image:url(gradient2.png);
border:2px solid #88de85;
padding:9px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-bottomright: 8px;
color: #093;
font-size:15px;
font-weight:bold;
font-style:italic;
}

Your Design 13 will be look like this

Example

Design 14

Html code for Design 14:

<form> <input class="design14" size="45" value="Can't Find what are you looking, search here" name="textfield" type="text"  />

</form>

Styling the “design14″ Textfield

Now we are going to add a search icon in text field, click here to view the icon and save it to your computer!
Css code for “class=’design14′” texfield:

.design13{
background-image:url(search.png);
	background-position:8px;
	background-repeat:no-repeat;
	border:2px solid #CCC;
	padding:9px 0 9px 38px;
	-webkit-border-radius:7px;
	-moz-border-radius:7px;
	font-size:15px;
	font-weight:bold;
	color: #333;
}

Your Design 14 will be look like this

Example

Demo is Available

Click here to view the demo!

Css Tutorials

Everything Css Tutorials