HTML/CSS- Design select boxes

Below are some useful select boxes designed using CSS and HTML, which are very useful in web desining

Follwing few simple steps, we can give good look and feel to checkboxes. Steps are as follows.

Step 1: Use below HTML

Design 1


   Choose an option
   1
   2
   3
   4
   5






Design 2


   Select an Option
   1
   2
   3
   4
   5





Design 3


   Select an Option
   1
   2
   3
   4
   5






Design 4


   Select an Option
   1
   2
   3
   4
   5




Design 5


   --- choose Your project ---
   php
   wordpress
   magento
   jquery
   html

Step 2: Use below CSS

#design1 {
 background: none repeat scroll 0 0 steelblue;
 border: 1px solid;
 outline: medium none;
 overflow: hidden;
 width: 10%;
}

#design2 {
 background: none repeat scroll 0 0 transparent;
 border: 0 none;
 color: #eee;
 font-size: 20px;
 font-weight: bold;
 padding: 2px 10px;
 width: 378px;
 background-color: #58B14C;
 border-radius: 25px;
}

#design3 {
 background: none repeat scroll 0 0 transparent;
 border: 0 none;
 color: #eee;
 font-size: 20px;
 font-weight: bold;
 padding: 2px 10px;
 width: 378px;
 background-color: black;
 border-radius: 25px;
 background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
}

#design4 {
 background-position: 97% center;
 background-repeat: no-repeat;
 border: 1px solid #aaa;
 color: #555;
 font-size: inherit;
 margin: 20px;
 overflow: hidden;
 padding: 5px 10px;
 text-overflow: ellipsis;
 white-space: nowrap;
 width: 300px;
}

#design5 {
 background-color: #A2AB58;
 background-position: 300px;
 background-repeat: no-repeat;
 border-radius: 5px;
 box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.6);
 color: #ff0;
 font-family: Cursive;
 font-size: 20px;
 line-height: 1;
 margin-top: 8px;
 outline: none;
 padding: 12px;
 webkit-appearance: none;
 width: 353px;
}

#design5:hover {
 color: #00ff7f;
}

Output

Design 1
Choose an option 1 2 3 4 5

Design 2
Select an Option 1 2 3 4 5

Design 3
Select an Option 1 2 3 4 5

Design 4
Select an Option 1 2 3 4 5

Design 5
--- choose Your project --- php wordpress magento jquery html

Hope this post will be useful for you :)