6 CSS HTML Form Styles

Styling HTML forms with CSS is fun and theres always something new to explore
and learn, but dont you feel dull when you do it over and over again? Sometimes
I do, I too hate to start from scratch, I rather use something that already looks
good and works. So here are few CSS from styles Ive created for your websites,
you just have to copy the markup and CSS into your projects and have nice
looking form.

Mark Up
Start by dropping HTML Form syntax in your project. Most common
form contains name, email, message field and submit button. Just
change the class name of the form to use different CSS styles.

1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
<form action="" method="post" class="STYLE-NAME">
<h1>Contact Form
<span>Please fill all the texts in the fields.</span>
</h1>
<label>
<span>Your Name :</span>
<input id="name" type="text" name="name" placeholder="
Your Full Name" />
</label>

<label>
<span>Your Email :</span>
<input id="email" type="email" name="email" placeholde
r="Valid Email Address" />
</label>

<label>
<span>Message :</span>
<textarea id="message" name="message" placeholder="You
r Message to Us"></textarea>
</label>
<label>
<span>Subject :</span><select name="selection">
<option value="Job Inquiry">Job Inquiry</option>
<option value="General Question">General
Question</option>
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
</select>
</label>
<label>
<span>&nbsp;</span>
<input type="button" class="button" value="Send" />
</label>
</form>
Basic Grey
The CSS below will transform your form into simple looking form, it
comes with regular form alignment and grey background, a perfect
base to start and further refining.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* Basic Grey */
.basic-grey {
width: 400px;
margin-right: auto;
margin-left: auto;
background: #EEE;
padding: 20px 30px 20px 30px;
font: 12px Georgia, "Times New Roman", Times, serif;
color: #888;
text-shadow: 1px 1px 1px #FFF;
border:1px solid #DADADA;
}
.basic-grey h1 {
font: 25px Georgia, "Times New Roman", Times, serif;
padding: 0px 0px 10px 40px;
display: block;
border-bottom: 1px solid #DADADA;
margin: -10px -30px 30px -30px;
color: #888;
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
}
.basic-grey h1>span {
display: block;
font-size: 11px;
}
.basic-grey label {
display: block;
margin: 0px 0px 5px;
}
.basic-grey label>span {
float: left;
width: 80px;
text-align: right;
padding-right: 10px;
margin-top: 10px;
color: #888;
}
.basic-grey input[type="text"], .basic-
grey input[type="email"], .basic-grey textarea,.basic-
grey select{
border: 1px solid #DADADA;
color: #888;
height: 24px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
outline: 0 none;
padding: 3px 3px 3px 5px;
width: 70%;
font: normal 12px/12px Georgia, "Times New
Roman", Times, serif;
}
.basic-grey select {
background: #FFF url('down-arrow.png') no-repeat right;
background: #FFF url('down-arrow.png') no-repeat right);
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 72%;
height: 30px;
}
.basic-grey textarea{
height:100px;
}
.basic-grey .button {
67
68
69
70
71
background: #E48F8F;
border: none;
padding: 10px 25px 10px 25px;
color: #FFF;
}
.basic-grey .button:hover {
background: #CF7A7A
}
Elegant Aero
Nice light blue CSS form, it comes to life in similar color background.
Copy CSS below in your project, change the class name of the form to
elegant-aero to achieve this elegant form.


1 /* Elegant Aero */
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
37
38
39
40
41
42
43
44
45
46
47
48
.elegant-aero {
width: 400px;
margin-right: auto;
margin-left: auto;
background: #DDF0F8;
padding: 30px 30px 20px 30px;
box-shadow: #868686 0 0px 10px -1px;
-webkit-box-shadow: #868686 0 0px 10px -1px;
font: 12px Arial, Helvetica, sans-serif;
color: #666;
}
.elegant-aero h1{
font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 20px 10px 20px 30px;
display: block;
background: #D0E6F0;
margin-top: -30px;
margin-left: -30px;
margin-right: -30px;
border-bottom: 1px solid #B9E1F1;
}
.elegant-aero h1>span {
display: block;
font-size: 11px;
}

.elegant-aero label>span {
float: left;
margin-top: 10px;
color: #5E5E5E;
}
.elegant-aero label {
display: block;
margin: 0px 0px 5px;
}
.elegant-aero label>span {
float: left;
width: 100px;
text-align: left;
padding-right: 10px;
margin-top: 10px;
font-weight: bold;
}
.elegant-aero input[type="text"], .elegant-
aero input[type="email"], .elegant-aero textarea, .elegant-
aero select {
color: #888;
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
width: 65%;
padding: 5px 4px 0px 5px;
margin-top: 2px;
margin-right: 6px;
margin-bottom: 16px;
border: 1px solid #CEE2E7;
background: #FBFBFB;
outline: 0;
-webkit-box-
shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
font: 200 24px/24px Arial, Helvetica, sans-serif;
}
.elegant-aero textarea{
height:100px;
}
.elegant-aero select {
background: #fbfbfb url('down-arrow.png') no-repeat right;
background: #fbfbfb url('down-arrow.png') no-repeat right;
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 67%;
}
.elegant-aero .button{
padding: 10px 30px 10px 30px;
background: #66C1E4;
border: none;
color: #FFF;
}
.elegant-aero .button:hover{
background: #3EB1DD;
}
Smart Green
Smart green is perfect for soft green backgrounds. Copy CSS below in
your project, change the class name of the form to smart-green to
achieve this stylish form.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*######## Smart Green ########*/
.smart-green {
width: 400px;
margin-right: auto;
margin-left: auto;
background: #FFF;
padding: 30px 30px 20px 30px;
box-shadow: rgba(194, 194, 194, 0.7) 0 3px 10px -1px;
-webkit-box-shadow: rgba(194, 194, 194, 0.7) 0 3px 10px -
1px;
font: 12px Arial, Helvetica, sans-serif;
color: #666;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.smart-green h1 {
font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 20px 0px 20px 40px;
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
display: block;
margin: -30px -30px 10px -30px;
color: #FFF;
background: #9DC45F;
text-shadow: 1px 1px 1px #949494;
border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
border-bottom:1px solid #89AF4C;

}
.smart-green h1>span {
display: block;
font-size: 11px;
color: #FFF;
}

.smart-green label {
display: block;
margin: 0px 0px 5px;
}
.smart-green label>span {
float: left;
margin-top: 10px;
color: #5E5E5E;
}
.smart-green input[type="text"], .smart-
green input[type="email"], .smart-green textarea, .smart-
green select {
color: #555;
height:24px;
width: 96%;
padding: 3px 3px 3px 10px;
margin-top: 2px;
margin-bottom: 16px;
border: 1px solid #E5E5E5;
background: #FBFBFB;
outline: 0;
-webkit-box-
shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
font: normal 14px/14px Arial, Helvetica, sans-serif;
}
.smart-green textarea{
height:100px;
padding-top: 10px;
}
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
.smart-green select {
background: url('down-arrow.png') no-repeat right, -moz-
linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);
background: url('down-arrow.png') no-repeat right, -
webkit-gradient(linear, left top, left bottom, color-
stop(0%,#FBFBFB), color-stop(100%,#E9E9E9));
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width:100%;
height:30px;
}
.smart-green .button {
background-color: #9DC45F;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-border-radius: 5px;
border: none;
padding: 10px 25px 10px 25px;
color: #FFF;
text-shadow: 1px 1px 1px #949494;
}
.smart-green .button:hover {
background-color:#80A24A;
}
White Pink
Another style for form, that utilizes the modern CSS box shadows to
achieve elegant looking form that comes with pink button style.


1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
/* ###### White / Pink #########*/
.white-pink {
width: 400px;
margin-right: auto;
margin-left: auto;
background: #FFF;
padding:30px 30px 20px 30px;
box-shadow:rgba(122, 122, 122, 0.7) 0 3px 10px -1px;
-webkit-box-shadow:rgba(122, 122, 122, 0.7) 0 3px 10px -
1px;
font: 12px Arial, Helvetica, sans-serif;
color: #666;
}
.white-pink h1 {
font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 0px 0px 10px 40px;
display: block;
border-bottom: 1px solid #F5F5F5;
margin: -10px -30px 10px -30px;
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5
3
6
3
7
3
color: #969696;
}
.white-pink h1>span {
display: block;
font-size: 11px;
color: #C4C2C2;
}
.white-pink label {
display: block;
margin: 0px 0px 5px;
}
.white-pink label>span {
float: left;
width: 80px;
text-align: right;
padding-right: 10px;
margin-top: 10px;
color: #969696;
}
.white-pink input[type="text"], .white-
pink input[type="email"], .white-pink textarea,.white-
pink select{
color: #555;
width: 65%;
padding: 3px 3px 3px 8px;
margin-top: 2px;
margin-right: 6px;
margin-bottom: 16px;
border: 1px solid #e5e5e5;
background: #fbfbfb;
outline: 0;
-webkit-box-
shadow: inset 1px 1px 2px rgba(200,200,200,0.2);
box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);
font: normal 12px/24px Arial, Helvetica, sans-serif;
}
.white-pink textarea{
height:100px;
}
.white-pink .button {
-moz-box-shadow:inset 0px 1px 0px 0px #fbafe3;
-webkit-box-shadow:inset 0px 1px 0px 0px #fbafe3;
box-shadow:inset 0px 1px 0px 0px #fbafe3;
background:-webkit-
gradient( linear, left top, left bottom, color-
stop(0.05, #ff5bb0), color-stop(1, #ef027d) );
background:-moz-linear-
8
3
9
4
0
4
1
4
2
4
3
4
4
4
5
4
6
4
7
4
8
4
9
5
0
5
1
5
2
5
3
5
4
5
5
5
6
5
7
5
8
5
9
6
0
6
1
gradient( center top, #ff5bb0 5%, #ef027d 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColo
rstr='#ff5bb0', endColorstr='#ef027d');
background-color:#ff5bb0;
border-radius:9px;
-webkit-border-radius:9px;
-moz-border-border-radius:9px;
border:1px solid #ee1eb5;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:30px;
line-height:28px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #c70067;
}
.white-pink .button:hover {
background:-webkit-
gradient( linear, left top, left bottom, color-
stop(0.05, #ef027d), color-stop(1, #ff5bb0) );
background:-moz-linear-
gradient( center top, #ef027d 5%, #ff5bb0 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColo
rstr='#ef027d', endColorstr='#ff5bb0');
background-color:#ef027d;
}
.white-pink .button:active {
position:relative;
top:1px;
}
.white-pink select {
background: url('down-arrow.png') no-repeat right, -moz-
linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);
background: url('down-arrow.png') no-repeat right, -webkit-
gradient(linear, left top, left bottom, color-
stop(0%,#FBFBFB), color-stop(100%,#E9E9E9));
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 67%;
6
2
6
3
6
4
6
5
6
6
6
7
6
8
6
9
7
0
7
1
7
2
7
3
7
4
7
5
7
6
7
7
7
8
7
9
8
0
8
1
8
2
8
3
8
4
8
}
5
8
6
8
7
8
8
8
9
9
0
9
1
9
2
9
3
9
4
9
5
9
6
9
7
9
8
9
9
Bootstrap Style Form
Bootstrap style form, that works well with white background. You can
use this style as base to make different looking from in different
colors.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* #### bootstrap Form #### */
.bootstrap-frm {
width: 400px;
margin-right: auto;
margin-left: auto;
background: #FFF;
padding: 20px 30px 20px 30px;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #888;
text-shadow: 1px 1px 1px #FFF;
border:1px solid #DDD;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.bootstrap-frm h1 {
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
font: 25px "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 0px 0px 10px 40px;
display: block;
border-bottom: 1px solid #DADADA;
margin: -10px -30px 30px -30px;
color: #888;
}
.bootstrap-frm h1>span {
display: block;
font-size: 11px;
}
.bootstrap-frm label {
display: block;
margin: 0px 0px 5px;
}
.bootstrap-frm label>span {
float: left;
width: 80px;
text-align: right;
padding-right: 10px;
margin-top: 10px;
color: #333;
font-family: "Helvetica Neue", Helvetica, Arial, sans-
serif;
font-weight: bold;
}
.bootstrap-frm input[type="text"], .bootstrap-
frm input[type="email"], .bootstrap-frm textarea, .bootstrap-
frm select{
border: 1px solid #CCC;
color: #888;
height: 20px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
outline: 0 none;
padding: 6px 12px;
width: 68%;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
font: normal 14px/14px "Helvetica
Neue", Helvetica, Arial, sans-serif;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
.bootstrap-frm select {
background: #FFF url('down-arrow.png') no-repeat right;
background: #FFF url('down-arrow.png') no-repeat right);
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 72%;
height: 30px;
}
.bootstrap-frm textarea{
height:100px;
}
.bootstrap-frm .button {
background: #FFF;
border: 1px solid #CCC;
padding: 10px 25px 10px 25px;
color: #333;
border-radius: 4px;
}
.bootstrap-frm .button:hover {
color: #333;
background-color: #EBEBEB;
border-color: #ADADAD;
}
Dark Matter
If your website is based on dark theme, you can use this form style to
fit your base color. All text are white and background is dark, which
can be changed to any other color of your choice.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* #### Dark Matter #### */
.dark-matter {
width: 400px;
margin-right: auto;
margin-left: auto;
background: #333;
padding: 20px 30px 20px 30px;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #888;
text-shadow: 1px 1px 1px #000;
border:none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.dark-matter h1 {
font: 25px "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 0px 0px 10px 40px;
display: block;
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
border-bottom: 1px solid #444;
margin: -10px -30px 30px -30px;
color: #FFF;
}
.dark-matter h1>span {
display: block;
font-size: 11px;
}
.dark-matter label {
display: block;
margin: 0px 0px 5px;
}
.dark-matter label>span {
float: left;
width: 80px;
text-align: right;
padding-right: 10px;
margin-top: 10px;
color: #FFF;
font-family: "Helvetica Neue", Helvetica, Arial, sans-
serif;
font-weight: bold;
}
.dark-matter input[type="text"], .dark-
matter input[type="email"], .dark-matter textarea, .dark-
matter select{
border: none;
color: #4B4B4B;
height: 20px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
outline: 0 none;
padding: 6px 12px;
width: 68%;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
font: normal 14px/14px "Helvetica
Neue", Helvetica, Arial, sans-serif;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.dark-matter select {
background: #FFF url('down-arrow.png') no-repeat right;
background: #FFF url('down-arrow.png') no-repeat right);
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 72%;
height: 30px;
}
.dark-matter textarea{
height:100px;
}
.dark-matter .button {
background: #FFF;
border: none;
padding: 10px 25px 10px 25px;
color: #333;
border-radius: 4px;
}
.dark-matter .button:hover {
color: #333;
background-color: #EBEBEB;
}
Conclusion
I have not tested these forms in some old browsers, but it should work
fine with all modern browsers. I have also ignored some other input
fields such as radio, checkboxs and file fields. I hope you can use these
CSS as your base to improve on those elements.