Mobile Friendly Website

CSSPLAY

Doing it with style

CSS DEMOSA CSS conversion of a form select list to drop list

Date : 25th November 2013

For all modern browsers




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


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.


Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

  1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
    A support donation is now required for this demonstration.
  2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
  3. 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.

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page