List Box with Check Box embedded

List box is nothing but the select html tag with the multiple attribute. List box gives the user to select as many as options in the given list.

Here I am going to show you how to create a list box with check box embedded in it. I am not going to use select tag. but some trick is played with the CSS to look it like the list box with check box embedded 

 <div style="overflow:auto;width:75px;height:75px;border:1px solid #336699;padding-left:5px">
<input type="checkbox" name="wow[]"> PHP<br>
<input type="checkbox" name="wow[]"> LINUX<br>
<input type="checkbox" name="wow[]"> APACHE<br>
<input type="checkbox" name="wow[]"> MYSQL<br>
<input type="checkbox" name="wow[]"> POSTGRESQL<br>
<input type="checkbox" name="wow[]">SQLITE<br> </div>

Below is the output of the above HTML statement.

PHP
LINUX
APACHE
MYSQL
POSTGRESQL
SQLITE

I am not actually using SELECT tag. but i am using DIV tag for creating this. In CSS, we have the overflow attribute with auto option that transforms any content within the div tag to scroll mode which looks like the list box. i am setting the width and height for the div which makes the real list box with check box embedded. Height is very important in order to make this kind of list box.. For check box, i used the normal input tag. Add some border and padding so that it will look like real list box with check box embedded.

MediaWiki

This page has been accessed 8,057 times.

This page was last modified 12:37, 27 June 2006.