Similar to my previous demo, this one converts a long scrolling select list into a more compact scrolling drop list.
Instead of using a select list I have changed this to a set of radio inputs and styled their associated labels to look like a drop list.
In this demo I have hidden the radio inputs as it is not necessary for visitors to see these when selecting the country fron the drop list.
Click the top level 'Select Country' with the down arrow to show the 'select list', then click the country you want. The 'select list' will stay open until you click the top level again which now has the up arrow showing.
So an alternative to the noral select list which can be styled any way you like, and all done with just CSS.
This does work in IE9 but the animation will not be seen.
You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.
Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.
If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.
Please Support CSS play
Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation
For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.