Possible Duplicate:
Is there a way to determine if a <select> dropdown menu is open?
My customer would like me to display some simple instructions once the user interacts with our <select>
element in such a way as to cause the <option>
list to drop down (or "drop up", I suppose, since some browsers open upwards if there is not much room beneath the <select>
box). And then the instructions should disappear again once the user has either made a new selection and thus caused the option list to disappear, or if they simply close the option list without making a change.
I thought that I was fairly well-experienced with using both CSS/CSS3 selectors and jQuery events to make things like a <div>
full of instructions appear and disappear, but for this case I am having trouble figuring out whether there is a way to tell when a <select>
box is not merely “active” or “focused” — both of which can be true while the select box is still closed and not displaying its list of options — but actually open. None of the CSS pseudo-selectors or jQuery events that I have tested let me “see”, much less respond to, the state of the open-ness or closed-ness of the <select>
box.
Does anyone know how I can set a trigger or write a CSS rule that depends on whether the options list is currently displayed?