CSS Style for Textbox, Textarea, Dropdown Box, Submit Button

By | October 22, 2012

Applying CSS Style to textbox, textarea, dropdown box and submit button will enhance the user interface. Without applying style, these input elements won’t looks more catchy. By pure CSS, we can make a better style to the textbox, textarea, dropdown box and submit button.

Below there are two images before applying css and after applying css. You can see how CSS will enhance UI.

 

 

Before Applying CSS

 

After Applying CSS

 

Stylesheet

input[type='text'] - it represents textbox

 input[type='password'] - it represents password textbox

input[type='submit'] –  it represents submit button

textarea - textarea

select – it represents about dropdown box

 

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
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
#text
{
float:left;
width:100px;
}

/*CSS for dropdown box*/
select
{
width: 200px;
height: 29px;
border-radius: 3px;
border: 1px solid #CCC;
font-weight: 200;
font-size: 15px;
font-family: Verdana;
box-shadow: 1px 1px 5px #CCC;
}
select: hover
{
width: 200px;
height: 29px;
border-radius: 3px;
border: 1px solid #CCC;
font-weight: 200;
font-size: 15px;
font-family: Verdana;
box-shadow: 1px 1px 5px #CCC;
}

/*CSS for input textbox and password*/

input[type='text'], input[type='password']
{
width: 200px;
height: 29px;
border-radius: 3px;
border: 1px solid #CCC;
padding: 8px;
font-weight: 200;
font-size: 15px;
font-family: Verdana;
box-shadow: 1px 1px 5px #CCC;
}

input[type='text']:hover, input[type='password']:hover
{
width: 200px;
height: 29px;
border-radius: 3px;
border: 1px solid #aaa;
padding: 8px;
font-weight: 200;
font-size: 15px;
font-family: Verdana;
box-shadow: 1px 1px 5px #CCC;
}

/*CSS for textarea*/

textarea
{
width: 200px;
height: 90px;
border-radius: 3px;
border: 1px solid #CCC;
padding: 8px;
font-weight: 200;
font-size: 15px;
font-family: Verdana;
box-shadow: 1px 1px 5px #CCC;
}
textarea:hover
{
width: 200px;
height: 90px;
border-radius: 3px;
border: 1px solid #aaa;
padding: 8px;
font-weight: 200;
font-size: 15px;
font-family: Verdana;
box-shadow: 1px 1px 5px #CCC;
}

/*input type for submit button*/

input[type='submit']
{
width: 150px;
height: 34px;
border: 2px solid white;
background-color:#CCC;
}
input[type='submit']:hover
{
width: 150px;
height: 34px;
border: 2px solid white;
background-color:#000000;
color:#fff;
}

 

HTML

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
<html>

<head>

</head>

<body>
<div id="text">Text box</div><input type="text" name="text" /><br /><br />
<div id="text">Textarea</div><textarea></textarea><br /><br />
<div id="text">Dropdown</div>
<select>
<option>Option</option>
<option></option>
<option></option>
</select><br /><br />
<div id="text">Submit</div> <input type="submit" name="submit" />
</body>
</html>

10 thoughts on “CSS Style for Textbox, Textarea, Dropdown Box, Submit Button

  1. Alan

    You took an image for the example because you know it would not work in all browsers….Next time show real thing.

    Reply
  2. Aditya Joshi

    Thanks for the tutorial , i really like it , it is what exactly i needed!
    Know me as one of your fan!

    Reply
  3. Shreyas Mulay

    Awsome work Bro!!!!!!! I am roaming from morning on ur blog…Every single thing is very much important…
    I am on a project right now and it ‘was’ looking so simple only images and background seems to b interesting…
    Now after applying all ur stuff it is just rocking like hell… Thanxx a ton Bro…All d best for ur life.

    Reply
  4. Halak

    Really very very helpfull!! searched many links… but this one solved all my queries!!

    Reply
  5. Mike

    Thanks! I’m going to make this for my new contact form on my website. Switching from basic opening the users webmail client with “mailto” function, to using a contact form. Thanks again.

    Reply
  6. Chetan

    Boss you used css3. i used the same css it’s not looking like in the image.

    There must be GADBAD GHOTALA…..

    Reply

Leave a Reply

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