Positioning the drop down window of a HTML SELECT

Question

I am using an HTML SELECT tag and want to make sure the window that opens when the user hits the arrow to position below the \"textbox\" part of the control.

The pro

Answer 1

Sorry. I'm afraid this is not possible. The problem is <select> dropdowns uses browser's native rendering of dropdowns. This means that there is limited styling capability and differ by browsers. I see the behavior you described on my OSX Chrome as well - not opening below the select box.

The only way you can have complete control the styles completely is to use something completely custom - building the <select> using DOM and javascript:

Check out this: http://gregfranko.com/jquery.selectBoxIt.js/

When selecting a library, make sure to pick one that transforms the native <select> tag into custom - IE the markup shouldn't be custom for your HTML. This is so when browsers don't have JavaScript, your <select> dropdown should still work