I often have to use a select box when I’m putting together a custom form that requires a drop down list. It took me a while to figure out how to easily style the select box using only CSS since certain parts are browser specific, such as the drop down arrow.
Here is how a select box will look by default:
This is the HTML code:
<select> <option>Here is the first option</option> <option>The second option</option> </select>
There are certain elements of a select box that we can style such as the font, border, color, padding and background color:
But that annoying drop down arrow always stays the same. There is no direct way to do style it, but the workaround is pretty simple.
First we need to surround our select box element with a div container:
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
Next we need to add a bit of CSS to make sure that the elements of the select box are styled a certain way:
.styled-select select {
background: transparent;
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
We need to make sure that our select box actually spans wider than the surrounding div container so that the default drop down arrow disappears.
This is the new drop down arrow I want to use:
Our div container needs to be styled like so in order for the new arrow to appear where we want it to:
.styled-select {
width: 240px;
height: 34px;
overflow: hidden;
background: url(new_arrow.png) no-repeat right #ddd;
border: 1px solid #ccc;
}
Our select box should now look like this:
Knowing this little workaround will make it a whole lot easier to style your select box exactly how you want it to be styled using nothing but CSS.
http://bavotasan.com/2011/style-select-box-using-only-css/
