Position label over select and open select on click

Question

I am trying to create a drop-down effect same as that shown in GMail. When u click a label a drop-down should open and the user should be able to select values.

I think it can be possible by aligning a label / div over the select such that only the allow of the select is visible and when a user clicks on the label or arrow the drop-down should open. Also the label value should not be visible in the drop-down.

Any help via css or JavaScript?

Answer 1

The technique specified above will be very tricky to get looking right, and will not work in older versions of IE. Older versions of IE display select boxes above everything else, and are a right pain to fix.

You're better off using a custom dropdown, of which there are lots written in jQuery.

Alternatively all you are really need to replicate the gMail functionality is a couple of lines of javascript to hide and show a div.

Answer 2

You just need to show and hide divs, take a look at this

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

Answer 3

On click you want to show the select box.

See this Jquery example.

http://api.jquery.com/show/

simple. .show() and .hide() functions are there.

If you want to use css

use .add() css or addClass and removeClass.

refer the above link.