Хлоп! Все эти обходные пути привели меня к выводу, что флажок HTML вроде бы отстой, если вы хотите его стилизовать.
Как предупреждение, это не реализация CSS. Я просто подумала, что поделюсь тем обходным решением, которое мне пришло на тот случай, если кто-нибудь еще найдет его полезным.
Я использовал элемент HTML5 canvas.
Преимуществом этого является то, что вам не нужно использовать внешние изображения и, возможно, можно сэкономить некоторую полосу пропускания.
Недостатком является то, что если браузер по какой-то причине не может правильно его отрендерить, то здесь нет отступления. Хотя вопрос о том, останется ли это в 2017 году, остается спорным.
Обновление
Я нашел старый код довольно некрасивым, поэтому решил переписать его.
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;
}
});
Вот рабочая демонстрация .
В новой версии используются прототипы и дифференциальное наследование для создания эффективной системы создания флажков. Чтобы создать флажок:
var my_checkbox = Checkbox.create();
Это немедленно добавит флажок в DOM и подключит события. Чтобы узнать, установлен ли флажок:
my_checkbox.is_checked(); // true if checked, else false
Также важно отметить, что я избавился от петли.
Обновление 2
В последнем обновлении я не упомянул о том, что использование canvas имеет больше преимуществ, чем просто установка флажка, который выглядит так, как вы хотите. Вы также можете создать multi-state флажки, если хотите.
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;
}
});
Я немного изменил Checkbox, использованный в последнем фрагменте, чтобы он был более универсальным, что позволило "расширить" его с помощью флажка, который имеет 3 состояния. Вот демоверсия . Как видите, он уже обладает большей функциональностью, чем встроенный флажок.
Что нужно учитывать при выборе между JavaScript и CSS.
Старый, плохо спроектированный код
Рабочая демоверсия
Сначала настройте холст
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'));
Затем разработайте способ обновления самого холста.
(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
})();
Последняя часть - сделать его интерактивным. К счастью, все довольно просто:
canvas.onclick = function(){
checked = !checked;
}
Здесь могут возникнуть проблемы в IE из-за их странной модели обработки событий в javascript.
Надеюсь, это кому-нибудь поможет, оно определенно соответствует моим потребностям.