CheckSelect: The new solution to the usability problems of <select multiple>

The old solution: <select multiple>

Alabama Alaska Arizona Arkansas California Colorado Connecticut Delaware District Of Columbia Florida Georgia Hawaii Idaho Illinois Indiana Iowa Kansas Kentucky Louisiana Maine Maryland Massachusetts Michigan Minnesota Mississippi Missouri Montana Nebraska Nevada New Hampshire New Jersey New Mexico New York North Carolina North Dakota Ohio Oklahoma Oregon Pennsylvania Rhode Island South Carolina South Dakota Tennessee Texas Utah Vermont Virginia Washington West Virginia Wisconsin Wyoming

This uses no javascript at all, and is the old way of doing things, using a <select> element with the multiple attribute.

Pros:

• Wide support, even in ancient browsers
• Allows quick selection of chunks of items using Shift+Click

Cons:

• Not widely used, so users may not realize they can select multiple options, or even how.
• Usability is low because a mis-click can undo all your previous selections

HTML:

<select multiple name="state-select">
	<option value="AL">Alabama</option>
	[...]
	<option value="WY">Wyoming</option>
</select>

CSS:

Virtually none to speak of.

The new solution: .checkselect

• Alabama
• Alaska
• Arizona
• Arkansas
• California
• Colorado
• Connecticut
• Delaware
• District Of Columbia
• Florida
• Georgia
• Hawaii
• Idaho
• Illinois
• Indiana
• Iowa
• Kansas
• Kentucky
• Louisiana
• Maine
• Maryland
• Massachusetts
• Michigan
• Minnesota
• Mississippi
• Missouri
• Montana
• Nebraska
• Nevada
• New Hampshire
• New Jersey
• New Mexico
• New York
• North Carolina
• North Dakota
• Ohio
• Oklahoma
• Oregon
• Pennsylvania
• Rhode Island
• South Carolina
• South Dakota
• Tennessee
• Texas
• Utah
• Vermont
• Virginia
• Washington
• West Virginia
• Wisconsin
• Wyoming

This uses no javascript at all, and is a new way of doing things. I am using CSS to emulate the <select multiple> using a list, checkboxes, and labels while improving the usability and obvious method of use.

Pros:

• Usability is improved because a mis-click will not undo all your previous selections
• Method of use is more obvious because people are used to checkboxes
• Similarity in appearance to <select multiple> means those familiar with it will understand it
• Progressive enhancement increases its similarity to <select multiple> via the :checked pseudo-selector and the adjacent sibling combinator

Cons:

• Browser support is untested, but should be strong for the basic usage
• Selecting a chunk of items using Shift+Click is impossible without JavaScript
• Pure filesize is larger due to more markup needed for <input type="checkbox"> and <label> elements

HTML:

<ul class="checkselect">
	<li>
		<input type="checkbox" name="state-checkselect" id="state-checkselect-AL" value="AL" />
		<label for="state-checkselect-AL>Alabama<label>
	</li>
	[...]
	<li>
                <input type="checkbox" name="state-checkselect" id="state-checkselect-WY" value="WY" />
                <label for="state-checkselect-WY>Wyoming<label>
        </li>
</ul>

CSS:

View the source of this page to see the relevant CSS for .checkselect. There's not much to it.