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.

 

 

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.

You may also like –