Creating a checkbox list popup from a select

Question

I'm having a few problems creating a multiple select checkbox list that appears when a user clicks a select field (I use the onfocus event).

As far as showing the list, that's fine, however how can one prevent the actual select field from showing a dropdown using javascript?

Answer 1

Why not! :)

DEMO

$('.sel').focus(function() {
    this.blur();
    window.focus();
    $('.dropdown').fadeToggle(300);
});

Answer 2

Here is the solution I use to customize the appearance of my select and fileupload controls:

1. give your element (select) opacity:0.1 either by css or jQuery fadeTo() function
2. wrap your element with a container div and give it position:relative.
3. add a sibling (drop panel) to the element and give it position:absolute, top:, left:0 and width equal to the width of element.
4. show the drop panel using jQuery in $(select).click() event.

may seem weird, but works cross browser :)