うわぁ！これらのすべての回避策により、HTMLチェックボックスをスタイル設定したい場合、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
前回の更新で言及しなかったのは、キャンバスを使用することには、見た目どおりに見えるチェックボックスを作成することよりも多くの利点があるということです。必要に応じて、マルチステートチェックボックスを作成することもできます。
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;
}
これは、JavaScriptの奇妙なイベント処理モデルのために、IEで問題が発生する可能性がある場所です。
これが誰かに役立つことを願っています。それは間違いなく私のニーズに合いました。
