Best 5 CSS3 Style for Textbox

Generally Textbox style in form or login or regitration page will makes the website looks much pretty. Using css3 style properties i have given some 5 type of style here with coding

[code type=css]
input[type=TEXT]
{
width:225px;
height:26px;
}
[/code]

 

[code type=html]

[/code]

[code type=css]

#text1
{
border: 2px solid rgb(173, 204, 204);
height: 31px;
width: 223px;
box-shadow: 0px 0px 27px rgb(204, 204, 204) inset;
transition:500ms all ease;
padding:3px 3px 3px 3px;
}

#text1:hover, #text1:focus
{
width:260px;
transition:500ms all ease;
background:url(msg.png) no-repeat right;
background-size:25px 25px;
background-position:96% 62%;
padding:3px 32px 3px 3px;
}

[/code]

[code type=html]

[/code]

 

[code type=css]

#text2
{
border: 2px solid rgb(173, 204, 204);
height: 31px;
width: 30px;
box-shadow: 0px 0px 27px rgb(204, 204, 204) inset;
transition:500ms all ease;
padding:3px 3px 3px 3px;
float:right;
}
#text2:focus
{
width:260px;
transition:500ms all ease;
padding:3px 32px 3px 3px;
}

[/code]

[code type=html]

[/code]

 

[code type=css]

#text3
{
background: #333;
color: #ccc;
width: 150px;
padding: 6px 15px 6px 35px;
transition: 500ms all ease;
border: 1px solid #333;
}
#text3:hover
{

box-shadow: 12px 13px 0px rgba(204, 211, 51, 0.38),
-11px -14px 0px rgba(241, 96, 0, 0.28),
18px -24px 0px rgba(0, 0, 0, 0.34),
33px -6px 0px rgba(39, 74, 214, 0.28);
}
[/code]

[code type=html]

[/code]

 

[code type=css]

#text4
{
box-shadow:1px 1px 45px #333;
transition: 200ms all ease;
border:none;
padding: 5px 5px;

}
#text4:hover
{
margin:-5px 0 0 -5px;
height:29px;
width:250px;
}

[/code]

[code type=html]

[/code]

 

[code type=css]

#text5
{
background: url(search-dark.png) no-repeat 10px 6px #333;
color: #ccc;
width: 150px;
padding: 6px 15px 6px 35px;
border-radius: 20px;
box-shadow: 0 1px 0 #ccc inset;
transition:500ms all ease;
}
#text5:hover
{
width:180px;
}

[/code]