CSS play - A CSS conversion of a form select list to drop list

25th November 2013

For IE9+, Firefox, Opera, Safari, Chrome
iPad, iPhone, iPod Touch, IE10 Touch Screen, Android OS and Smartphones including Windows wp8


Replace your drab form select lists such as ..

Select Country



.. with a CSS styled drop list alternative

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
Y
Z

copyright © stu nicholls - CSS play

Information

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.


Copyright

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.


Free, practical CSS menus, layouts, and examples

Follow CSS play


Facebook   Twitter   Facebook Fan Page