Best 5 CSS3 Style for Textbox

By | August 6, 2013

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

General CSS
1
2
3
4
5
6
7
8
9
input[type=TEXT]
{
width:225px;
height:26px;
}

 

Type 1 Textbox
CSS Textbox style

CSS Textbox style

1
<input id="text1" type="text" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#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;
}
Type 2 Textbox
CSS Textbox style

CSS Textbox style

1
<input id="text2" type="text" />

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#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;
}
Type 3 Textbox
CSS Textbox style

CSS Textbox style

1
<input id="text3" type="text" />

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#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);
}
Type 4 Textbox
CSS Textbox style

CSS Textbox style

1
<input id="text4" type="text" />

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#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;
}
Type 5 Textbox
CSS Textbox style

CSS Textbox style

1
<input id="text5" type="text" />

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#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;
}

3 thoughts on “Best 5 CSS3 Style for Textbox

  1. Pingback: CSS Style for Textbox, Textarea, Dropdown Box, Submit Button | Freeze Coders

Leave a Reply

Your email address will not be published. Required fields are marked *

freeway-noncreativity