Form elements - checkbox, radio button and CSS

How to change the look of checkbox and radio button elements by the help of CSS properties, or why it is not possible to remove border of checkbox I try to explain in this article. Further I demonstate experimental checkbox with muliple options, based on current HTML text box. Because there are no rules how the form elements should respond to CSS properties, it is not possible to evaluate "correct" browser.

Form element <input type="checkbox"> is used for selecting one from two possible options. Radio button <input type="radio"> serves as switch for selecting only one from many options. Both element are basically two images, which are interchanged according to desired status. Because border of element is drawn in image, it is not possible to remove, or change the border.

Generally browsers render these elements as two different pictures according to set status. Border and its contents so are not drawn separately as in the case of text box and because border is part of pictures, it is not possible to remove it. Different type of border is visible in screenshots of Opera and Safari. In addition, removed border and not checked checkbox would be invisible element, that would be very confusing.

Live form which follows is appended by corresponding CSS code and is intended for comparison of live form in your actual browser with screenshots from other browsers. Light gray color in form limits the space occupied by element and in addition helps to highlight white parts of form elements.

Live form in your browser does not have to confirm screenshots. Elements rendering depends on local browser setting, browser version or motive in OS. E.g. client IE allows to change display of form elements (Tools/Internet Options/Advanced/Enable visual styles on buttons...). Or early versions of Safari for Windows proved to change the size of tested elements according to specified dimension, later versions do not have this possibility yet. FireFox is able to change size of these elements in motive classic only. Chrome beta renders elements the same way as FireFox in classic motive. IE browser have to be switched into standard mode.

screenshot: form elements checkbox and radio button in varied browsers and used CSS

Intention of screenshot is to compare some style properties, which affect design of compact form. Contrary to login or blog form, where is enough space around form elements and few pixels does not matter, in case of compact forms which looks like database or spreadsheet table every pixel is counted. Properties such as occupied space, change size, or ability to switch element to classic look are essential for compact forms. These type of forms is usually applied in intranet application, which handle data saved in database.

It is evident from screenshots that these elements are really better not to style. Solution is to reserve space 20x20 pixels for each element, although the size of element can be smaller (real size of element in Opera is 16x16 pixels). CSS property background is tested because of switching to the classic look of element.

Attributes of elements checkbox a radio

<input type="checkbox" name="ch" value="yes" />

Checkbox should have unique name identifier, as all the other form elements. Only elements which are in active status (check mark is displayed) are submitted to server. As far as there is not specified value, pair name=on is submitted. In case when value is specified, pair name=value is submitted. According to our example it is pair ch=yes. When checkbox is not selected (is not active), checkbox information are not submitted to server.

<input type="radio" name="rd" value="1" />

Elements radio, which are members of one group must have the same attribute name, but attribute value must distinguish for each element. According to the same name, browser ensures switched-on only one radio button element from group. Submitted is only one pair name=value for whole group of radio buttons, where value is according to switched-on radio button.

Attributes checked and id

Provided initial status of element is to be active e.g. according to value in database, then at generating html code by server script, attribute checked="checked" (XHTML), or checked (HTML) have to be assigned to this element. Do not leave radio buttons in undefined status. Only one radio button from group of buttons should be set-up to active status by help of attribute checked.

Benefit of attribute id is in connection with element label and its attribute for. Then we can change status of element by click on supporting text and there is no need to click to the niggly elements checkbox and radio button. Attribute id is also used when reference to that element is required in JavaScript. Easy reference to this element is obtained by function document.getElementById() then.

Attribute disabled

In specific situations we need to mark some form elements as disabled to indicate that there is no point in given context for these elements. The context usually depends on selected option in preceding form element. Then with help of JavaScript, group of elements are set to disabled (or enabled) state. Form elements checkbox and radio in state disabled are rendered as grayed to indicate that elements have no meaning.

Form element which is in status disabled is not submitted to server for processing. One remark: attribute readonly is not defined for elements checkbox and radio according to W3C.

Experimental checkbox

Customizable checkbox can be created by help of textBox element, controlled by JavaScript. When font size is changed, element size is changed too (so-called accessible element). Such experimental checkbox has its own handicap - it does not look like typical checkbox and unskilled user can be confused. Functionality of the experimental checkbox depends on switched-on JavaScript. Try following live form with both classic checkbox and experimental checkboxes.

In IE browser at rapid clicking some mouse clicks are evaluated as double-click (also for classic checkbox). Differences in browsers event processing are described in Javascript Madness: Mouse Events.


<script type="text/javascript>
function swBox(box) {
  x = document.getElementById(box).value;
  document.getElementById(box).value = (x == "X") ? "" : "X";
}
</script>

Above is function for experimental checkbox switching status. Instead of check mark character, letter X is used, or it can be substituted by text (yes/no). In some cases X, or text is more appropriate than graphics check off mark. Likewise graphic characters from upper part of UTF-8 code page can be used.

...
<tr>
<td class="label">
<a href="javascript: swBox('c2')">#2, two state text box</a>
</td>

<td class="cont">
<input type="text" name="c2" id="c2" class="inp2" value="X"
 readonly="readonly" onclick="return swBox('c2')">
</td>
</tr>
...

HTML code section shows link mouse click events to JavaScript function. Input textBox and descriptive text (which here imitate behavior of HTML element label for) are linked to function swBox(). Important fact here is input textBox attribute readonly, which prevents user to type text into the form field.


<style type="text/css">
.inp2 {margin: 0; border: 0; padding: 0; background: #ffa;
       font: bold 100% Arial, SansSerif, Verdana; width: 1.1em;
       text-align: center; cursor: default;}
</style>

Above is CSS code for experimental checkBox. In the third row of live form example, there is multi-status checkBox for values "YES / NO / don't know". That differs only in details and especially in function for status processing.

Small difference is in form content submitted to server. While classic checbox submit element name and its value only when activated, described status box submit name and value every time. In our example it is string "c2=" in case inactive status, or "c2=X" in case of active status.

updated 21.09.2008

#1, classic HTML checkbox
#2, two state text box
#3, three state text box