How to customize a "select" HTML form element with CSS 3?

Question

I cannot change the size of a select HTML form element without having ugly results, and totally different depending of the browser.

Do you know a method like the one 37 Signals did (unfortunately only for Webkit) : http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit

Or any method / workaround which work on FF/safari/Chrome (and maybe IE ;-) ?

I create a form with huge elements : easy to have huge buttons or input[text], but so far impossible to do the same with select.

Thanks !

Solution 1

This is sadly still not possible reliably across browsers and operating systems. Way to go is actually a javascript-based solution that emulates a select field.

Solution 2

You can style your select box with this jQuery:

http://www.adamcoulombe.info/lab/jquery/select-box/

It is easy to implement and degrades nicely (to default select) in browsers that do not support it (IE6).

jQuery plugin (included in download link):

customSelect.jquery.js

Javascript:

$(document).ready(function(){
    $('select').customStyle();
});

CSS:

.customStyleSelectBox {
/* Styles For Your Select Box */
}

.customStyleSelectBox.changed {
/* You can use this if you want a different style after user has made a selection */
}

/* on the next line we add a down arrow on the right to indicate that it is a select box */
.customStyleSelectBoxInner {
background:url(canvas-list-nav-item-arrow-.gif) no-repeat center right;
}

Image preview:

Solution 3

Unfortunately, CSS3 doesn't contain any extra features for styling <select> boxes. Furthermore, any attempt to style them using CSS will end up in a cross-browser chop suey mess.

The way to go would be Javascript/jQuery, here's a jQuery one that I've used in the past. If a user has Javascript turned off, it'll just default to a normal <select> element.

Feel free to browse around for a solution that meets your needs, you might need a vanilla Javascript one if you're not already using jQuery.

Comments

[BoltClock]

Well, like most other form elements, <select> can't be reliably styled since its default look is derived from a browser's GUI, or the OS GUI. That is, browser vendors choose how they want to render it.

[Zouzouwizman]

Thanks a lot for this usefull anwser !

[Zouzouwizman]

Thanks ! I wil try it too :-)

[Dan]

How did you go @Zouzouwizman? Did you find this jQuery plugin useful?