Traditional multi-select element would be a set of
check boxes, but not buttons:
http://www.w3schools.com/jsref/dom_obj_checkbox.asp[
^],
http://www.w3.org/TR/html-markup/input.checkbox.html[
^].
If you need to check boxes looking like buttons (which I would not advise, because, on a disgusting-looking page sample you demonstrated, it's not so easy to see if the button are pressed down or not), or have some other custom look, mimic check box behavior with just a image (
<img>
) elements showing 2 or more states (like checked, unchecked, checked disabled, unchecked disabled, undetermined) through using different bitmaps it its
src
attribute. These different "src" values should be flipped by handling mouse/keyboard events of the images.
You can find many ready-to-use examples of such behavior and customize them further by just using your own bitmaps. For example:
http://tomekwojcik.github.io/jQuery-Custom-Checkboxes/[
^],
http://webdesign.maratz.com/lab/fancy-checkboxes-and-radio-buttons/demo.html[
^],
http://www.jquery4u.com/plugins/15-jquery-radio-button-checkbox-style-plugins/[
^]… enough, I think.
You can find a lot more; using jQuery along it will give you this:
http://bit.ly/I7Xqnj[
^].
You main goal should be: don't do anything similar to the samples you referenced in your question; the users will hate it.
If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery[
^],
http://jquery.com[
^],
http://learn.jquery.com[
^],
http://learn.jquery.com/using-jquery-core[
^],
http://learn.jquery.com/about-jquery/how-jquery-works[
^] (start from here).
—SA