我试图使用以下样式的复选框:

<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>

但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?


当前回答

呵!所有这些变通方法让我得出结论,如果你想要设置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比仅仅创建一个你想要的复选框有更多的优势。如果您愿意,还可以创建多状态复选框。

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;
    }
});

我稍微修改了上一个代码片段中使用的复选框,使其更通用,从而可以使用具有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中奇怪的事件处理模型。


我希望这能帮助到一些人;它绝对符合我的需要。

其他回答

呵!所有这些变通方法让我得出结论,如果你想要设置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比仅仅创建一个你想要的复选框有更多的优势。如果您愿意,还可以创建多状态复选框。

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;
    }
});

我稍微修改了上一个代码片段中使用的复选框,使其更通用,从而可以使用具有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中奇怪的事件处理模型。


我希望这能帮助到一些人;它绝对符合我的需要。

这将使虚线边界,以及背景你寻找,同样,如果你想设置一个特定的背景颜色,当勾选时,简单地设置它在适当的地方为你的问题:) 这个解决方案还设置了一个自定义的复选标记图标等。

对于像这样的HTML元素: <input type="checkbox" />

input[type='checkbox']:checked {
  background-color: rgb(60,69,77,0.9);
}
input[type='checkbox']:checked:after {
  content: '\2713';
  color:white;
}
input[type='checkbox']{
  background:#ff0000;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  width: 20px !important;
  height: 20px !important;
  appearance:none;
  border-radius:10%;
  border: 1px dotted rgb(60,69,77,0.9);
  box-shadow: none;
  font-size: 1em;
}

快速修复在文本前面添加图标:

< asp:CheckBox... Text="< img src='/link/to/img.png' />My Text" />

CSS基本用户界面模块第4级(最终)通过一个叫做重音-颜色的新解决方案增加了对这一点的支持,它实际上非常简单,不像这里的其他答案:

输入{ 强调色:rebeccapurple; } <input type="checkbox" />

简单地设置任何CSS颜色(例如命名值,十六进制代码等)你想作为重音颜色的值,它将被应用。

这目前工作在Chrome (v93+), Edge (v93+), Firefox (v92+), Opera (v79+)和Safari (v15.4+)。

注意:Edge, Chrome和Opera(可能还有Safari;我不能测试)目前也不支持通过rgba()的alpha通道值(rgba()的RGB值仍将“工作”;alpha通道将被浏览器忽略)。有关更多信息,请参阅MDN浏览器支持。

通过使用Materialize和一个自定义样式表,你可以实现这样的东西:

CSS代码

.custom_checkbox[type="checkbox"]:checked + span:not(.lever)::before {
  border: 2px solid transparent;
  border-bottom: 2px solid #ffd600;
  border-right: 2px solid #ffd600;
  background: transparent;
}

HTML代码

<label>
    <input type="checkbox" class="custom_checkbox" />
    <span>Text</span>
</label>

Demo

JSFiddle演示