Styling A Select Box Using CSS3

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

I often use select box in my html documents and i was wondering if i could style them with CSS3 and i searched it on google and found out. So today i'am gonna teach you how to style html select box :

Here is our simple select box/list :

Everything Widgets Tutorial CSS3 jQuery

This is the HTML code:

<select>
<option> Everything </option>
<option> Widgets </option>
<option> Tutorial </option>
<option> CSS3 </option>
<option> jQuery </option>
</select>

Very simple , basic and boring. There are certain elements of a select box that we can style such as the font, border, color, padding and background color:

Everything Widgets Tutorial CSS3 jQuery

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 like this:

<div class="styled-select">
<select>
<option> Everything </option>
<option> Widgets </option>
<option> Tutorial </option>
<option> CSS3 </option>
<option> jQuery </option>
</select>
</div>

Now we'll add some CSS in it :

<style>
.styled-select {
width: 228px;
height: 34px;
overflow: hidden;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_JRz-bgAc-hcLVTK4jrgxxU5Vns_75MO_7pJ27Rcr3H2hHftuOzsxi4jeLTeb6jpZ_ZrY5x98VuwX2rvalWy7GbqrqfK3Ww475TgzfqsE3-qOJDljwGMa6oOxu1NnR2v1QV0O-YkUqQM/s1600/Select.png) no-repeat ;
border-radius: 10px;
}
.styled-select select {
background: transparent;
width: 228px;
padding: 5px;
border: 1px solid #CCC;
font-size: 16px;
height: 34px;
font-weight: bold;
outline:0px;
-webkit-appearance: none;
border-radius: 10px;
}
.styled-select option {
background: lightgrey;
width: 228px;
padding: 5px;
border: 1px solid #CCC;
font-size: 16px;
height: 34px;
outline:0px;
-webkit-appearance: none;
}
</style>

This will look like :

Everything Widgets Tutorial CSS3 jQuery

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.

Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.