Question

In jQuery, you can stop a <select> from opening it’s dropdown menu by using event.preventDefault in the mousedown handler. Allowing you to replace the dropdown with something else while still retaining the original style of the form element.

This works fine in Chrome and MSIE, but in FireFox and Opera the dropdown appears regardless.
(Not tested on Safari)

Example: http://jsfiddle.net/9cmEh/

The select element should look enabled and still respond to all user interaction as if enabled, but the dropdown should not be rendered. Instead the dropdown will be replaced by something custom rendered, such as including color swatches, icons or fonts, but the “custom dropdown” part is already done in my project.

Does anybody know how to make this work in all* browsers.

• “All” meaning the recent versions of the five browsers mentioned.

Answer 1

$(function() {
    $('select').on('focus', function(e) {
        this.blur();
        window.focus();
    });
});

FIDDLE

Works in Firefox atleast, but does’nt seem to work in Chrome ?

EDIT

I could’nt come up with a decent way of detecting whether one method works or not, so did some browser sniffing instead. Not really the best way to do it, but the best I could come up with, and it does seem to work in the browsers I’ve tested :

$(function() {
    $('select').on('focus mousedown', function(e) {
        if ($.browser.webkit||$.browser.msie) {
            e.preventDefault();
        }else{
            this.blur();
            window.focus();
        }
    });
});​