Tutorial: Create Cross Browser Select Box Styles Using CSS

So many new element styles on modern web pages. CSS is a powerful language to make it. Besides buttons, there are other HTML elements that we can change its styles. In this tutorial we will create select box styles using CSS. We will create select box below.

First, we need a select element inside element. But, you need write it inside

element and give a class for this div element. For example, I give a class called newSelectStyle for this div element. You may write following code inside element.

<div class="newSelectStyle">
<select>
<option>First Option</option>
<option>Second Option</option>
<option>Third Option</option>
<option>Fourth Option</option>
</select>
</div>

Now, create a CSS rules for above elements. You may write following CSS rules.

.newSelectStyle {
display: inline-block;
overflow: hidden; /* it will remove select arrow on IE because select box width exceed the div width */
background: #eee url(selectArrow.png) no-repeat right ; /* this is custom select arrow */
border: 1px solid #ddd;
width: 170px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}

.newSelectStyle select {
-webkit-appearance: none;
-moz-appearance: none; 
appearance: none;
background: transparent;
text-indent: 0.01px; /* trick to remove select arrow on firefox */
text-overflow: ''; /* trick to remove select arrow on firefox */
outline:0;
border:0;
font-size: 14px;
font-family: Tahoma, Arial, Verdana;
font-weight: bold;
padding: 5px;
width: 200px;
height: 30px;
}

.newSelectStyle:hover { /* conditions when mouse over select box */
border: 1px solid #ccc;
box-shadow: inset 2px 2px 2px #ddd, inset -2px -2px 2px #ddd;
-moz-box-shadow: inset 2px 2px 2px #ddd, inset -2px -2px 2px #ddd;
-webkit-box-shadow: inset 2px 2px 2px #ddd, inset -2px -2px 2px #ddd;
}

Now, you can see your select box like this.

First Option Second Option Third Option Fourth Option

I've tested it for cross browser compatibility. It works well on Chrome, Firefox, IE and Safari. Feel free to give me feedback. I hope this tutorial about creating cross browser select box can be useful for you.