Хлоп! Все эти обходные пути привели меня к выводу, что флажок HTML отстой, если вы хотите его стилизовать.
Как предупреждение, это не реализация CSS. Я просто подумала, что поделюсь обходным решением, которое я придумала на случай, если кто-то еще может найти его полезным.
Я использовал canvasэлемент HTML5 .
Плюсом этого является то, что вам не нужно использовать внешние изображения и, возможно, можно сэкономить некоторую полосу пропускания.
Недостатком является то, что если браузер по какой-то причине не может правильно его отобразить, то здесь нет отступления. Хотя вопрос о том, остается ли это проблемой в 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
В последнем обновлении я не упомянул, что использование холста имеет больше преимуществ, чем просто установка флажка, который выглядит так, как вы хотите. Вы также можете создавать флажки с несколькими состояниями , если хотите.
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.
Я надеюсь, что это помогает кому-то; это определенно соответствовало моим потребностям.
