graphical select box

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开发者_Python百科 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;}

You can't do this with CSS only (there are a lot of issues with styling selects, especially it's text color), but with a little help of JS you can change it's appearance: http://jsfiddle.net/kizu/cuaC9/

This is a base example, you can upgrade it further to support pressed, focus, changed or any other state.

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.