Position label over select and open select on click

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 开发者_Python百科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?

I thought jquery .click() handler could help, but NO! :(((

So I found the only way:

<style>
  div {display:inline-block; position:relative;}
  div select {position: absolute; left:0px; top:0px; width:100%; height:100%; opacity:0; cursor:pointer;}
</style>
<div>
  label text here
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</div>

Result - you click some label and standart select box opens. And no JS at all ;)

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.

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.

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

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