Custom Checkboxes, Custom Radio Buttons, Custom Select Lists

This JavaScript and CSS will allow you to use custom images to style checkboxes, radio buttons and drop down menu select lists. Have you ever wanted to use your own images for checkboxes, radio buttons or select lists? This script will let you do that. Easily. The unobtrusive script gracefully degrades, so if JavaScript is disabled, normal form input objects appear instead of your customized elements. This works flawlessly in Firefox, Safari, Internet Explorer 7, Opera and others. The example This script is stand-alone and does not require jQuery or other library to work. View a more comprehensive example How does it work? In a nutshell, the JavaScript looks for every form element with class="styled" on it; hides the real form element; sticks a span tag with a CSS class on it next to the element; and, finally, mouse events are added to the span that handles the visual stages form inputs go through when they are clicked. Download the full script Download the CSS file The CSS The HTML Checkbox

Form -> Cookie -> Form You are here: irt.org | Articles | JavaScript | Cookie | Form -> Cookie -> Form [ previous next ] Published on: Sunday 15th June 1997 By: Martin Webb Introduction The code described here is generic, i.e. it can be used with any type of form you wish to produce. It supports the storing of information from the following form element types: text, i.e. Form Elements It is important to distinguish the type of element when setting its value, as its type dictates how the value is set. To set the value of a text element, the following syntax is used: To set a select element, the following syntax is used: To set a radio element, the following syntax is used: To set a checkbox element, the following syntax is used: One limitation that has to be observed when using a group of radio elements, as the group of radio elements all have the same name (that's why they are a group), the only way the individual radio elements within the group can be accessed is via their index, which must be a numeric integer.

Contactify