Caramba! Todas essas soluções alternativas me levaram à conclusão de que a caixa de seleção HTML é uma porcaria se você quiser estilizá-la.
Como aviso prévio, essa não é uma implementação de CSS. Eu apenas pensei em compartilhar a solução alternativa que encontrei, caso alguém ache útil.
Eu usei o canvaselemento HTML5 .
A vantagem disso é que você não precisa usar imagens externas e provavelmente pode economizar largura de banda.
A desvantagem é que, se por algum motivo um navegador não puder renderizá-lo corretamente, não haverá substituto. Embora seja discutível se isso continua sendo um problema em 2017.
Atualizar
Achei o código antigo muito feio, então decidi reescrevê-lo.
Object.prototype.create = function(args){
var retobj = Object.create(this);
retobj.constructor(args || null);
return retobj;
}
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, offset){
this.ctx.fillStyle = color;
this.ctx.fillRect(offset, offset,
this.width - offset * 2, this.height - offset * 2);
},
draw: function(){
this.draw_rect("#CCCCCC", 0);
this.draw_rect("#FFFFFF", 1);
if(this.is_checked())
this.draw_rect("#000000", 2);
},
is_checked: function(){
return !!this.state;
}
});
Aqui está uma demonstração de trabalho .
A nova versão usa protótipos e herança diferencial para criar um sistema eficiente para a criação de caixas de seleção. Para criar uma caixa de seleção:
var my_checkbox = Checkbox.create();
Isso adicionará imediatamente a caixa de seleção ao DOM e conectará os eventos. Para consultar se uma caixa de seleção está marcada:
my_checkbox.is_checked(); // True if checked, else false
Também é importante notar que eu me livrei do loop.
Atualização 2
Algo que eu esqueci de mencionar na última atualização é que o uso da tela tem mais vantagens do que apenas fazer uma caixa de seleção com a aparência que você deseja. Você também pode criar caixas de seleção de vários estados , se desejar.
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;
}
});
Modifiquei um pouco o Checkboxusado no último trecho para torná-lo mais genérico, possibilitando "estendê-lo" com uma caixa de seleção que possui 3 estados. Aqui está uma demonstração . Como você pode ver, ele já possui mais funcionalidades do que a caixa de seleção incorporada.
Algo a considerar ao escolher entre JavaScript e CSS.
Código antigo mal projetado
Demonstração de trabalho
Primeiro, configure uma tela
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
checked = 0; // The state of the checkbox
canvas.width = canvas.height = 15; // Set the width and height of the canvas
document.body.appendChild(canvas);
document.body.appendChild(document.createTextNode(' Togglable Option'));
Em seguida, crie uma maneira de atualizar a tela.
(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
})();
A última parte é torná-lo interativo. Felizmente, é bem simples:
canvas.onclick = function(){
checked = !checked;
}
É aqui que você pode ter problemas no IE, devido ao modelo estranho de manipulação de eventos em JavaScript.
Espero que isso ajude alguém; definitivamente atendeu às minhas necessidades.
