Form elements - checkbox, radio and CSS
Goal of this article is to make summary of elements checkbox and radio button shapes affected by the help of CSS properties and how it is presented in various browsers. In the second part of article experimental checkbox, based on standard HTML text box, is described.
Form element <input type="checkbox" .. /> is used for selecting one from two possible status. Radio button <input type="radio" .. /> serves as switch for selecting only one from many possibilities. Both element are basically pictures, which changes the appearance according to desired state. Because border of element is part of picture, it is not possible to remove, or change the border.
Following illustration is summary of partial screenshots from different browsers. Elements were formated into table cell to determine real space and size which each element occupies. There is no animation effect visible on screenshots.
Screenshots were obtained by the help of following style.
<input type="checkbox" />
.background {background: #ffa; color: #OOf;}
.reset {border: none; padding: 0; margin: 0; float: left;}
.size18x18 {width: 18px; height: 18px; margin: 0; border: none; padding: 0;}
.size40x24 {width: 40px; height: 24px; margin: 0; border: none; padding: 0;}
There is only few possible characteristics to change: size and periphery space. As you can see result of any change is worse, than natural look. It seems that these elements are definitely not style-able.
Default display it means without any CSS class, size and shape of elements distinguish according to browser. Because part of some borders is white color, background in these examples is light grey, in order to visible difference. IE has uniform size 20x20, FireFox 20x20 and 21x17, Opera 21x17, Safari 18x18 a 18x19 pixels.
CSS property background would switch-over the appearance to classical type known from Win2000. Opera tries to conform appearance, but radio button is not quite perfect. Safari insists on Aqua look. Adjusted background color takes different effect, or none at all, foreground color is shown only in Opera.
At periphery reset (margin, padding, border), size and shape of elements stay the same as in default display. Space which elements occupy is changed: FireFox 13x14, Opera 17x17, Safari 14x14 pixels. IE all the time occupy space 20x20 pixels. CARE if border: 0; is set-up, IE7 switches elements to classic appearance. Setting border: none; leave in original look.
At setting proportions to 18x18 pixels browsers keep specified space. Real element size is re-counted only in FireFox and Safari, other browsers change padding only, in spite of padding reset.
When unsymmetric proportions are specified, only Safari changes the ratio of element. Visible change of proportion are not adequate in different browsers. FireFox and Safari increase size relatively more than IE, Opera do not change size of element at all.
Atributes 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 off 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.
Atributes 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" is assigned to this element. Do not leave radio buttons in undefined status. 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.
Experimental checkbox
Sometimes I find in log query on removal border of element checkbox. Provided that checkbox is two-state picture and border is part of picture it can be clear to understand, that it is not possible to remove border in checkbox element.
Stylish checkbox we have to create from element textBox, controlled by JavaScript. At font size change its size is changed also and then is so-called accessible. Experimental checkbox has its handicap - it does not look like classic checkbox and inexperienced user can be confused. Further its function depends upon switched-on JavaScript. For functionality test classic checkbox and status box live example follows.
In IE browser at fast 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>
Function for status switching is trivial. Just small notice capital letter X it can be substituted by text (yes/no), which in some cases 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 linking mouse click events and JavaScript function in input box and descriptive text which here imitate behavior of HTML element label for. Important is input box attribute readonly, which prevents user to type text into 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>
For completeness CSS code for status box. Another more-status box for values "YES / NO / don't know" differ 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 28.12.2007