In this blog post , we will tell you to style your HTML drop down field.

We have created simple form with id=”myform”  and add drop down field into it.

Now, with the help of CSS we have styled our form fields, just follow our codes or download it to use.

styled select option field in form

 

 

HTML File: drop_down.html


<!DOCTYPE html>
<html>
<head>
<title>Styled Drop-Down Field in Form - Demo Preview</title>
<meta content="noindex, nofollow" name="robots">
<link href="css/drop_down.css" rel="stylesheet"> <!-- Include CSS File Here-->
</head>
<body>
<div id="main">
<div id="first">
<h1>Styled Drop-Down Field in Form</h1>
<form id="myform" name="myform">
<label>Name :</label>
<input class="name" type="text">
<label>Email :</label>
<input class="email" type="text">
<label>Age :</label>
<select>
<option>--- Choose Age From Here ---</option>
<option>Below 18 years</option>
<option>Between 18-25 years</option>
<option>Between 25-40 years</option>
<option>Between 40-60 years</option>
<option>Above 60 years</option>
</select>
<input class="submit" type="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>

 CSS File: drop_down.css


@import "http://fonts.googleapis.com/css?family=Arvo";
/* Above line is used for online google font */
h1 {
text-align:center
}
hr {
border:0;
border-top:1px solid #ccc;
margin-bottom:-10px
}
div#main {
width:868px;
height:654px;
margin:20px auto;
font-family:'Arvo',serif
}
div#first {
width:350px;
height:615px;
padding:0 45px 20px;
border:1px dotted #ccc;
float:left
}
input {
width:340px;
height:35px;
border:1px solid gray;
padding-left:10px;
margin-top:8px;
border-radius:5px
}
select {
background-image:url(../images/arrow.png);
background-repeat:no-repeat;
background-position:300px;
width:353px;
padding:12px;
margin-top:8px;
font-family:Cursive;
line-height:1;
border-radius:5px;
background-color:#A2AB58;
color:#ff0;
font-size:20px;
-webkit-appearance:none;
box-shadow:inset 0 0 10px 0 rgba(0,0,0,0.6);
outline:none
}
select:hover {
color:#00ff7f
}
.submit {
width:353px;
height:45px;
color:#fff;
margin-top:170px;
background-color:#1067a2;
font-size:20px;
font-weight:700
}

 

Conclusion:

So, this way you can style your drop down field in more elegant fashion.