Changing the css of select input menu in HTML5

We can change the Look and feel of the select input element in HTML in a very easy manner. Things that we would wish to change are the dropdown icon, the width and height of select button, the background color etc.

Here is how we do it.

1. Enclose the <select> in a <div>

<div class="select-wrapper">
    <select>
        </option value="1">Option 1</option>
        </option value="2">Option 2</option>
    </select>
</div>

2. Add following to your style sheet

.select-wrapper select { 
    moz-appearance: none;
    -webkit-appearnce: none;
    appearance: none;
    background-color: rgb(0, 133, 255);
    border-radius: 5px;
    box-shadow: inset 0 0 10px #444;
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
    width: 25%;
    color: white;
    font-size: 16px
}

And you shall see a nice blue styled custom select button