Customize form checkbox into graphic button

OVERVIEW

Create a custom HTML form checkbox where the checkbox is replaced by text with a background graphic with ON and OFF states. When page loads the user simply sees a square box with text in the middle (OFF state). When user clicks box, the background changes to ON state, the text remains the same, and the actual checkbox has a value of 1.

USE

Mobile Web App. Users will use finger to click between off and on states.

DETAILS

Lite. Lite. Lite. This will be used on a mobile website and needs to be as lite as possible.

Should be developed using Javascript, CSS and HTML. If you would like to use something else, let's talk about it first.

The initial (unchecked) state when the page loads is with centered label text and gray background (see attached [login to view URL]). When the user clicks anywhere in the box, the background shifts to red and the box is checked (value of 1).

The custom checkbox should be 62 x 62 pixels, which is the size of the graphics (see attached).

Please create a style for the label text to the following: Arial, 12 px, Bold, Color #FFFFFF.

Initial OFF state graphic is gray and is attached ([login to view URL]).

The ON state graphic is red and is also attached ([login to view URL]).

Please deliver 3 files: Javascript file; CSS file; HTML file linking to .js and .css files with a sample form and the custom checkbox.

Feel free to create a dummy form if you want, but it's not necessary. We just need the custom checkbox to do what we've described.

We can modify names, ids, filenames, etc., so feel free use anything for now.

Let us know if you have any questions. We are eager to get something done quickly.

CSS HTML JavaScript

Nº du projet : #803220

À propos du projet