I was in need of a custom select box so I implemented the following :
html :
<div class="select">
<select name="Step_01_Roof_Width" onChange="GetWidth();" class="Step_01_SelectBox" id="Step_01_Select_Width">
</div>
css :
.select select
{
width: 300px;
background: transparent;
padding: 5px;
font-size: 10px;
line-height: 1;
border: 0;
border-radius: 0;
height: 19px;
-webkit-appearance: none;
}
.select
{
width: 270px;
height: 19px;
border-radius: 15px;
border: black solid 1px;
background: url(/wp-content/themes/blackbird/phpwizard/HTML5Application/public_html/images/Step_01/selectarrow.png) no-repeat right white ;
}
Unfortunately, this setup only seems to function properly on chrome and safari. Firefox and IE are presenting some issues. You can take a look at it here : If you know how to make it work like it does on chrome and safari on firefox and IE, your help would be greatly appreciated! Thank you for taking the time to read.