Question

I’ve been searching for a way to customize a form’s select box across browsers.

I have no problem doing this to an input box, but the select box seems to be a little trickier.

Ultimately, I’d like to have the select box transparent via css and add a background image to it’s surrounding div similar to the way I’ve coded my input boxes

<div class="contact-input">
 <input type="text" class="contact-text" name="name" placeholder="Name">
</div>

.contact-input{width:247px;height:48px;background:url('../images/contact-inputbg.png') no-repeat;}
.contact-text{width:217px;height:25px;margin:11px 0 0 11px;background:transparent;border:0;font:16px Arial, Helvetica, sans-serif;color:#a3a3a3;}

Answer 1

The web page Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements shows how to use JS and a little CSS to achieve styled select, checkbox, and radio fields. Also, the input fields you use do not have to be wrapped in a <label> tag, so this works with FormTools.