Click here to Skip to main content
13,344,765 members (61,754 online)
Click here to Skip to main content
Add your own
alternative version


11 bookmarked
Posted 1 Nov 2005

Inputer Replacer

, 1 Nov 2005
Rate this:
Please Sign up or sign in to vote.
Javascript implementation to make standard form radios or checkboxes visually attractive by exchanging with images.


The age old problem of styling HTML inputs has plagued developers for years, as the current CSS rules (<2.0) provide limited scope for styling. This method offers a solution to this problem by replacing all page inputs (of type radio or checkbox) with appropriate image representations.


The original code was written by BrainError. All credits are to him for his methodology. I have simply extended the functionality of his code by adding support for radio buttons and disabled inputs. Please visit his site for the original implementation.

Using the code

The code is completely self contained. You simply need to add the JS file to any of your pages where you want the replacement to occur and it will do the biz for you. Simply add the following to the HEAD section of your HTML pages or copy and paste all the code into your JS source:

<script language="JavaScript" src="wdx_inputreplacer.js">

Open the JS file and update the following lines with appropriate locations to your images for replacement:

var imgCheckboxFalse = 'images/checkbox_unchecked.gif';
var imgCheckboxTrue = 'images/checkbox_checked.gif';
var imgCheckboxFalseDisabled = 
var imgCheckboxTrueDisabled = 
var imgRadioFalse = 'images/radio_unchecked.gif';
var imgRadioTrue = 'images/radio_checked.gif';
var imgRadioFalseDisabled = 
var imgRadioTrueDisabled = 

You could remove the line:

window.onload = init;

from the bottom of the JS source file and call the init() function from your page's BODY or manually if you like.

The code is highly cross-browser compatible as the method is very basic. It will also continue to provide the functionality (without the visual improvements) if JavaScript is disabled.

Notes before use

All inputs must be given unique IDs (which is fine if you are a .NETter) otherwise the script will not be able to identify which input has been checked/unchecked.

Future changes

The current implementation is not accessible as the images swapped in do not strictly exist in the DOM therefore cannot be tabbed to. If I find the need I will update this article with a method to do so. However, it would require pre-adding the visual images into the page source and therefore would not be as "plug and play" as this version, however it may provide a method for the replacement of specific inputs rather than all.



This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Anthony Main
Web Developer
United Kingdom United Kingdom
Anthony Main started developing and designing web sites as far back as 1996 using traditional HTML. His skills have now grown and he is a professional .net developer, with skills in c#,, css, xhtml.

Running his own company Web DynamiX (in his spare time) he develops web solutions for small to medium size businesses and provides hosting and consultancy solutions.

His main occupation is of web developer where is works for Branded 3/a> developing .Net projects for medium to enterprise businesses.

You can read his personal blog at:

You may also be interested in...

Comments and Discussions

Questionsame question Pin
Markus197421-Nov-07 3:23
memberMarkus197421-Nov-07 3:23 
Hey, it's me again.
Has anybody got a clue how you can make the onClick actions work with this script? The values of the inputs are submitted, but if I apply an onClick action to a radiobutton it won't work...
Would be great to get some help... Smile | :)
QuestiononClick actions Pin
Markus197421-Oct-07 6:05
memberMarkus197421-Oct-07 6:05 
GeneralLabel Support Pin
BWD14-Nov-05 20:34
memberBWD14-Nov-05 20:34 
GeneralRe: Label Support Pin
Anthony Main14-Nov-05 23:50
memberAnthony Main14-Nov-05 23:50 
GeneralLabel support Pin
BWD14-Nov-05 13:16
memberBWD14-Nov-05 13:16 
QuestionGreat, nothing more Pin
daniero8-Nov-05 8:34
memberdaniero8-Nov-05 8:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.180111.1 | Last Updated 1 Nov 2005
Article Copyright 2005 by Anthony Main
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid