Making ListBox with CSS

Aug, 2005Hedger Wang

Recently, I had received a request from a mail by someone that asked me if I can add multiple="yes" to the problem which I fixed in Fix the bug with z-Index issue of SELECT lists in Internet Explorer

The question somehow interested me because I didn`t want to make a fake <select /> to fix the z-index bug instead of making <select /> better. Furthermore, I would like to add an extra feature to IE that can help IE to display fancy background with form elements.

Traditional Listbox

Here is a commonly used traditional listbox, you can always found that in many pages (example)

Code preview for Traditional Listbox

Advanced listbox

Now I would like to change the markup. I don`t want to use <select> and <option< for this case. Instead, I use <input type="radio" /> to present the same function.

Code preview for Advanced Listbox

This sample use some CSS3.0 selectors for CSS3.0 compatible browsers (such as my Firefox1.06+, Netscape 7+), and also use expression() behavior for Internet Explorer 5.0 (IE7 is not tested yet).

If you use any browsers I mentioned here, then you should see that the advanced listbox looks quiet different from traditional listbox.

In fact, you may find that it`s actually a list of < input type="radio" /> within a <label /> tag, which make it possible that whenever you click on the <label />, then the < input type="radio" /> is automatically checked especially I don`t add ant extra id or for attribute to these tags. (see Enhance web form with htmlFor)

The best part is, if you use Firefox1.06+, then it should be compatible with the psuedo selector :checked , and without any JS support, the entire dynamic effects just work! (Hoverer Effect, Checked Effect)

CSS for advanced listbox

div.listbox[id] input:checked+span is the key to make things work here.

And.....we can also try the list-checkbox ( multiple=" multiple" )

....Cool, , isn`t it?

List CheckBox

But there`s more. Since it`s designed with a list of radio/checkbox, thus we can simple switch its presentation as we want. Let`s add some exrta style here.

Conclusion

I think these samples should have good degraded support, which means that those browsers which can`t handle these CSS rules or Javascript(IEonly) well should still be able to access the HTML markup and use its original functions.

Programmed and designed by Hedger Wang
visitors