Return to Answer

I hope this helps someone. It definitely suited my needs.

I hope this helps someone; it definitely suited my needs.

Yikes! All these workarounds have led me to the conclusion that the HTML checkbox kinda sucks if you want to style it.

As a forewarning, this isn't a css implementation. I just thought I'd share the workaround I came up with in case anyone else might find it useful.

my_checkbox.is_checked(); // true if checked, else false 

Object.prototype.create = function(args){ var retobj = Object.create(this); retobj.constructor(args || null); return retobj; } Object.prototype.extend = function(newobj){ var oldobj = Object.create(this);   for(prop in newobj) oldobj[prop] = newobj[prop]; return Object.seal(oldobj); } var Checkbox = Object.seal({ width: 0, height: 0, state: 0, document: null, parent: null, canvas: null, ctx: null, /* * args: * name default desc. * * width 15 width * height 15 height * document window.document explicit document reference * target this.document.body target element to insert checkbox into */ constructor: function(args){ if(args === null) args = {}; this.width = args.width || 15; this.height = args.height || 15; this.document = args.document || window.document; this.parent = args.target || this.document.body; this.canvas = this.document.createElement("canvas"); this.ctx = this.canvas.getContext('2d'); this.canvas.width = this.width; this.canvas.height = this.height; this.canvas.addEventListener("click", this.ev_click(this), false); this.parent.appendChild(this.canvas); this.draw(); }, ev_click: function(self){ return function(unused){ self.state = !self.state; self.draw(); } }, draw_rect: function(color, offsetx, offsety){ this.ctx.fillStyle = color; this.ctx.fillRect(offsetx, offsety, this.width - offsetx * 2, this.height - offsety * 2); }, draw: function(){ this.draw_rect("#CCCCCC", 0, 0); this.draw_rect("#FFFFFF", 1, 1); this.draw_state(); }, draw_state: function(){ if(this.is_checked()) this.draw_rect("#000000", 2, 2); }, is_checked: function(){ return this.state == 1; } }); var Checkbox3 = Checkbox.extend({ ev_click: function(self){ return function(unused){ self.state = (self.state + 1) % 3; self.draw(); } }, draw_state: function(){ if(this.is_checked()) this.draw_rect("#000000", 2, 2); if(this.is_partial()) this.draw_rect("#000000", 2, (this.height - 2) / 2); }, is_partial: function(){ return this.state == 2; } }); 

I modified slightly the Checkbox used in the last snippet so that it is more generic, making it possible to "extend" it with a checkbox that has 3 states. Here's a demo. As you can see, it already has more functionality than the built-in checkbox.

(function loop(){ // Draws a border ctx.fillStyle = '#ccc'; ctx.fillRect(0,0,15,15); ctx.fillStyle = '#fff'; ctx.fillRect(1,1,13,13); // Fills in canvas if checked if(checked){ ctx.fillStyle = '#000'; ctx.fillRect(2,2,11,11); } setTimeout(loop,1000/10); // refresh 10 times per second })(); 

This is where you might have problems in IE, due to their weird event handling model in javascript.

I hope this helps someone, it definitely suited my needs.

Yikes! All these workarounds have led me to the conclusion that the HTML checkbox kind of sucks if you want to style it.

As a forewarning, this isn't a CSS implementation. I just thought I'd share the workaround I came up with in case anyone else might find it useful.

my_checkbox.is_checked(); // True if checked, else false 

Object.prototype.create = function(args){ var retobj = Object.create(this); retobj.constructor(args || null); return retobj; } Object.prototype.extend = function(newobj){ var oldobj = Object.create(this); for(prop in newobj) oldobj[prop] = newobj[prop]; return Object.seal(oldobj); } var Checkbox = Object.seal({ width: 0, height: 0, state: 0, document: null, parent: null, canvas: null, ctx: null, /* * args: * name default desc. * * width 15 width * height 15 height * document window.document explicit document reference * target this.document.body target element to insert checkbox into */ constructor: function(args){ if(args === null) args = {}; this.width = args.width || 15; this.height = args.height || 15; this.document = args.document || window.document; this.parent = args.target || this.document.body; this.canvas = this.document.createElement("canvas"); this.ctx = this.canvas.getContext('2d'); this.canvas.width = this.width; this.canvas.height = this.height; this.canvas.addEventListener("click", this.ev_click(this), false); this.parent.appendChild(this.canvas); this.draw(); }, ev_click: function(self){ return function(unused){ self.state = !self.state; self.draw(); } }, draw_rect: function(color, offsetx, offsety){ this.ctx.fillStyle = color; this.ctx.fillRect(offsetx, offsety, this.width - offsetx * 2, this.height - offsety * 2); }, draw: function(){ this.draw_rect("#CCCCCC", 0, 0); this.draw_rect("#FFFFFF", 1, 1); this.draw_state(); }, draw_state: function(){ if(this.is_checked()) this.draw_rect("#000000", 2, 2); }, is_checked: function(){ return this.state == 1; } }); var Checkbox3 = Checkbox.extend({ ev_click: function(self){ return function(unused){ self.state = (self.state + 1) % 3; self.draw(); } }, draw_state: function(){ if(this.is_checked()) this.draw_rect("#000000", 2, 2); if(this.is_partial()) this.draw_rect("#000000", 2, (this.height - 2) / 2); }, is_partial: function(){ return this.state == 2; } }); 

I modified slightly the Checkbox used in the last snippet so that it is more generic, making it possible to "extend" it with a checkbox that has 3 states. Here's a demo. As you can see, it already has more functionality than the built-in checkbox.

(function loop(){ // Draws a border ctx.fillStyle = '#ccc'; ctx.fillRect(0,0,15,15); ctx.fillStyle = '#fff'; ctx.fillRect(1, 1, 13, 13); // Fills in canvas if checked if(checked){ ctx.fillStyle = '#000'; ctx.fillRect(2, 2, 11, 11); } setTimeout(loop, 1000/10); // Refresh 10 times per second })(); 

This is where you might have problems in IE, due to their weird event handling model in JavaScript.

I hope this helps someone. It definitely suited my needs.

Update 2

Something I neglected to mention in the last update is that using the canvas has more advantages than just making a checkbox that looks however you want it to look. You could also create multi-state checkboxes, if you wanted to.

Object.prototype.create = function(args){ var retobj = Object.create(this); retobj.constructor(args || null); return retobj; } Object.prototype.extend = function(newobj){ var oldobj = Object.create(this); for(prop in newobj) oldobj[prop] = newobj[prop]; return Object.seal(oldobj); } var Checkbox = Object.seal({ width: 0, height: 0, state: 0, document: null, parent: null, canvas: null, ctx: null, /* * args: * name default desc. * * width 15 width * height 15 height * document window.document explicit document reference * target this.document.body target element to insert checkbox into */ constructor: function(args){ if(args === null) args = {}; this.width = args.width || 15; this.height = args.height || 15; this.document = args.document || window.document; this.parent = args.target || this.document.body; this.canvas = this.document.createElement("canvas"); this.ctx = this.canvas.getContext('2d'); this.canvas.width = this.width; this.canvas.height = this.height; this.canvas.addEventListener("click", this.ev_click(this), false); this.parent.appendChild(this.canvas); this.draw(); }, ev_click: function(self){ return function(unused){ self.state = !self.state; self.draw(); } }, draw_rect: function(color, offsetx, offsety){ this.ctx.fillStyle = color; this.ctx.fillRect(offsetx, offsety, this.width - offsetx * 2, this.height - offsety * 2); }, draw: function(){ this.draw_rect("#CCCCCC", 0, 0); this.draw_rect("#FFFFFF", 1, 1); this.draw_state(); }, draw_state: function(){ if(this.is_checked()) this.draw_rect("#000000", 2, 2); }, is_checked: function(){ return this.state == 1; } }); var Checkbox3 = Checkbox.extend({ ev_click: function(self){ return function(unused){ self.state = (self.state + 1) % 3; self.draw(); } }, draw_state: function(){ if(this.is_checked()) this.draw_rect("#000000", 2, 2); if(this.is_partial()) this.draw_rect("#000000", 2, (this.height - 2) / 2); }, is_partial: function(){ return this.state == 2; } }); 

I modified slightly the Checkbox used in the last snippet so that it is more generic, making it possible to "extend" it with a checkbox that has 3 states. Here's a demo. As you can see, it already has more functionality than the built-in checkbox.

Something to consider when you're choosing between JavaScript and CSS.