Text Box Styling in CSS

Text box is a very important useful control in html. It is very simple in look. But we can style it in various ways using CSS3 text box. We can style the different part of the text box. That is, we can change the border, outline, margin, background color , fore color, padding, font, shadow, width, height, active.

1. Border
1. Border-style : Set the style of the border
2. Border-width : Set the width of the border
3. Border-color : Set the color of the border
4. Border-radius : Set the corner radius of the border

2. Background
1. Background-color : Set the background color of the text box.
2. Background-image : Set the background image
3. Background-position : Set the background position
4. Background-repeat : Set how the background repeat
3. Font
1. Font-size : Set the font size
2. Font-weight : Set the font weight
3. Font-family : Set the font family
4. Shadow
1. Box-shadow : Set the shadow of the text box.
5. Hover
1. Set what happened when the mouse move over the text box.
6. Focus
1. Set what happened when the text box is focus or active.
7. Width
1. Width : Set the width of the text box.

Make a container with header

@charset "utf-8";

.full
{
width:80%;
position:relative;
left: 10%;
padding: 10px;
margin-top: 30px;
margin-bottom: 30px;
box-sizing: border-box;
font-size: 18px;
font-weight: bold;
color: #3852A1;
}

.container
{
width: 60%;
background-color: #fff;
border-style: solid;
border-width: 1px;
border-color: #000;
position: relative;
left: 20%;
}

.container header
{
width: 100%;
text-align: center;
font-size:28px;
background-color: #000;
color: #fff;
font-weight: bolder;
box-sizing: border-box;
}

Textbox class Style1

.style1
{
border-style: solid;
border-width: 1px;
border-color: #000;
border-radius: 50px;
}

Textbox class Style2

.style2
{
border: none;
border-bottom-style: solid;
border-bottom-width: 3px;
border-color: #f00;
}

.style2:focus
{
background-color: #F7E4E4;
}

Textbox class Style 3

.style3
{
background-image: url("u.png");
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 35px;
border-style: solid;
border-width: 1px;
border-color: #000;
border-radius: 5px;
box-shadow: 10px 10px 10px rgba ( 136 , 136 , 136 , 0.3 );
}