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

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 🙂