Design Css Form Textarea

admin On April - 13 - 2011

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

Lets start the Begining: Design 1

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

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

Styling the “design1″ Textarea

Okay, now we are going to design “class=’design1′” Textarea, 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 Textarea.
border: This is used for changing the border color of the Textarea.

Your Design 1 will be look like this

Example

Design 2

Html code for Design 2:


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

Styling the “design2″ Textarea

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

.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 Textarea.
border: This is used for changing the border color of the Textarea.
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" name="textarea" size="45" type="text" value="A quick brown fox jumps over the lazy dog" />
</form>

Styling the “design3″ Textarea

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

.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 Textarea.
border: This is used for changing the border color of the Textarea.
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" name="textarea" size="45" type="text" value="A quick brown fox jumps over the lazy dog" />
</form>

Styling the “design4″ Textarea

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

.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" name="textarea" size="45" type="text" value="A quick brown fox jumps over the lazy dog" />
</form>

Styling the “design5″ Textarea

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

.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" name="textarea" size="45" type="text" value="A quick brown fox jumps over the lazy dog" />
</form>

Styling the “design6″ Textarea

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

.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" name="textarea" size="45" type="text" value="A quick brown fox jumps over the lazy dog" />
</form>

Styling the “design7″ Textarea

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

.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 Textarea.
border: This is used for changing the border color and border size of the Textarea.
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" name="textarea" size="45" type="text" value="A quick brown fox jumps over the lazy dog" />
</form>

Styling the “design8″ Textarea

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

.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" name="textarea" size="45" type="text" value="A quick brown fox jumps over the lazy dog" />
</form>

Styling the “design9″ Textarea

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

.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 9:

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

Styling the “design10″ Textarea

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

.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" name="textarea" size="45" type="text" value="A quick brown fox jumps over the lazy dog" />
</form>

Styling the “design11″ Textarea

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

.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 Textarea.
border: This is used for changing the border color of the Textarea.
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

Styling the “design12″ Textarea

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

.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

Styling the “design13″ Textarea

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

.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

Demo is Available

Click here to view the demo!

Css Tutorials

Everything Css Tutorials