Attractive,colorful Dropdown list box in Html,Css

To change the background color of drop-down menu box i.e Select tag  in html

Are you bored to default drop-down box in html,Lets make it colorful using CSS.

      Lets see a sample program to create a colorful drop-down box.

                        

  Html:

 <select name="state" id="state" >
            <option value="">Select state....!</option>
            <option value="">Option 1</option>
            <option value="">Option 2</option>
            <option value="">Option 3</option>
            <option value="">Pradeesh</option>
         
            </select>

  CSS :

       select {
  width: 158px;
  height: 24px;
  color: #fff;
  font: 14px arial,sans-serif;
  background-color:#5e8ce9;
       }
select:hover {
  background-color:#8db3ff;
  color: black;
}
select option:nth-child(odd) {
            color:black;
            background:#5e8ce9;
        }
 select option:nth-child(even) {
            color:black;
            background:#5e8ce9;
        }

  Ex:2  Background color of each item in select tag can be changed, in the below code the "odd" items & "even " items in the list are differentiated.

 <style>

select {
  width: 158px;
  height: 24px;
  color: #fff;
  font: 15px Timesnewroman;
  background-color:#53868B;
}
select option:nth-child(odd) {
            color:black;
            background:#9BCD9B;
        }
 select option:nth-child(even) {
            color:black;
            background:#66CDAA;
        }
</style>


Read more about simple drop down box & their attributes in w3schools .