You are currently viewing a snapshot of taken on April 21, 2008. Most of this content is highly out of date (some pages haven't been updated since the project began in 1998) and exists for historical purposes only. If there are any pages on this archive site that you think should be added back to, please file a bug.

Checkbox (Tri-State)

Feature Owner
Mike Pinkerton

Currently the -moz-tristate style property is not implemented, but is implemented as an attribute. This should be fixed by M10.

There are two types of checkboxes: regular and tri-state. Regular checkboxes are exactly the same as checkboxes on web pages in HTML. Tri-state checkboxes are capable of being in three states: unchecked, mixed, and checked in that order.

Both types of checkboxes are declared using the normal HTML tag <html:input type="checkbox">. The only difference is that for tri-state checkboxes, you specify a style rule indicating it is tri-state (setting -moz-tristate equal to true).

For normal checkboxes, you can use the checked property for accessing and changing the state of the checkbox. Since this property is a boolean, we cannot use it when the checkbox is in tri-state mode. As a result, you must use the getAttribute and setAttribute AOM functions to access the -moz-tristatevalue attribute.

At any time, a checkbox may be switched to the other mode by setting -moz-tristate appropriately. The current value will be maintained, unless of course it is in the mixed state and it is transforming back into a normal checkbox. In this case, the box will revert to being checked. Note that the -moz-tristatevalue attribute is not present when the checkbox is in normal mode, and will be removed when transforming from tri-state to normal mode. This is to ensure that the normal checkbox does not deviate from the HTML4 standard.

Checkboxes may be placed within labels (<html:label>) so that clicking on the explanitory text of the checkbox will toggle it.

<?xml version="1.0"?>
<?xml-stylesheet href="xul.css" type="text/css"?>

<!DOCTYPE window>

<window style="width: 100%; height: 100%"


function setTriMixed()
  var tsbox = document.getElementById("tristate");
  tsbox.setAttribute("-moz-tristatevalue", "2");

function setNormalChecked ()
  var tsbox = document.getElementById("normal");
  tsbox.checked = true;



<!-- this is a normal checkbox -->
<html:input type="checkbox" id="normal"/>Normal checkbox


<!-- this is a tristate checkbox -->
<html:input type=checkbox id="tristate" style="-moz-tristate: true"/>
   Tri-state checkbox

<!-- some buttons that just set the value of the checkboxes -->
<html:button onclick="setTriMixed()">Set Tri-State To Mixed State
<html:button onclick="setNormalChecked()">Set Normal To Checked


The checkbox's look on a mouse down can be controlled using CSS, as well as the look when the mouse is hovering over the box.

 background: darkGray;
 border: 1px inset black;
 border: 1px solid black;