Fatal编程技术网
  • html/
  • Html 如何使用CSS设置复选框的样式

Html 如何使用CSS设置复选框的样式

html css checkbox

Html 如何使用CSS设置复选框的样式,html,css,checkbox,Html,Css,Checkbox,我正在尝试使用以下内容设置复选框的样式： 更新： 下面的答案参考了CSS 3普及之前的情况。在现代浏览器（包括InternetExplorer9和更高版本）中，使用首选样式创建复选框替换更加简单，无需使用JavaScript 以下是一些有用的链接： 值得注意的是，根本问题没有改变。您仍然无法将样式（边框等）直接应用于checkbox元素，并使这些样式影响HTML复选框的显示。然而，改变的是，现在可以隐藏实际的复选框，并用自己的样式化元素替换它，只使用CSS。特别是，由于CSS现在

我正在尝试使用以下内容设置复选框的样式：

更新：

下面的答案参考了CSS 3普及之前的情况。在现代浏览器（包括InternetExplorer9和更高版本）中，使用首选样式创建复选框替换更加简单，无需使用JavaScript

以下是一些有用的链接：

值得注意的是，根本问题没有改变。您仍然无法将样式（边框等）直接应用于checkbox元素，并使这些样式影响HTML复选框的显示。然而，改变的是，现在可以隐藏实际的复选框，并用自己的样式化元素替换它，只使用CSS。特别是，由于CSS现在有一个广泛支持的
：checked
选择器，因此您可以使替换项正确反映复选框的选中状态

老答案

给你。基本上，作者发现不同浏览器的默认复选框差别很大，而且无论您如何设置，许多浏览器总是显示默认复选框。所以这真的不是一个简单的方法

不难想象有一种变通方法，可以使用JavaScript在复选框上覆盖一个图像，然后单击该图像即可选中真正的复选框。没有JavaScript的用户将看到默认复选框

编辑添加：这里是；它隐藏了真正的checkbox元素，用一个样式化的span替换它，并重定向单击事件。

有一种方法可以使用CSS来实现这一点。我们可以（ab）使用
标签
元素并设置该元素的样式。需要注意的是，这不适用于InternetExplorer8和更低版本

.myCheckbox输入{
位置：相对位置；
z指数：-9999；
}
.myCheckbox span{
宽度：20px；
高度：20px；
显示：块；
背景：url（“链接到图片”）；
}
.myCheckbox输入：选中+span{
背景：url（“链接到另一张图片”）；
}
我的样式化“复选框”的标签
我认为最简单的方法是设置
标签的样式，并使
复选框不可见

HTML


复选框
，即使是隐藏的，仍然可以访问，并且在提交表单时会发送其值。对于旧浏览器，您可能必须将
标签的类更改为使用JavaScript检查，因为我认为InternetExplorer的旧版本不理解
：：在
复选框上检查
通过使用
：after
附带的新功能，您可以实现非常酷的自定义复选框效果和
：在
伪类之前。这样做的好处是：您不需要向DOM添加更多内容，只需添加标准复选框即可

注意：这只适用于兼容的浏览器。我认为这与某些浏览器不允许在输入元素上设置
：after
和
：before
有关。不幸的是，目前只支持WebKit浏览器。Firefox+InternetExplorer仍将允许复选框正常工作，只是没有设置样式，这有望在将来发生变化（代码不使用供应商前缀）

这只是一个WebKit浏览器解决方案（Chrome、Safari、移动浏览器）





$（函数（）{
$（'input'）.change（函数（）{
$（'div'）.html（Math.random（））；
});
});

/*主类*/
.myinput[type=“checkbox”]：在{
位置：相对位置；
显示：块；
宽度：11px；
高度：11px；
边框：1px实心#808080；
内容：“；
背景：#FFF；
}
.myinput[type=“checkbox”]：在{
位置：相对位置；
显示：块；
左：2px；
顶部：-11px；
宽度：7px；
高度：7px；
边框宽度：1px；
边框样式：实心；
边框颜色：#b3b3#dcddde#dcddde#b3b3；
内容：“；
背景图像：线性梯度（135度，#B1B6BE 0%，#FFF 100%）；
背景重复：无重复；
背景位置：中心；
}
.myinput[type=“checkbox”]：选中：之后{
背景图片：url数据数据：图像/png；Bas64，IVBoWeWeWeWeWeWeWeWeWeWe数据数据：数据数据：图像/png；基础64，基础64，数据数据数据：图像/数据：图像/png；基础64，基础64，IBoWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAATKSUQMCC'）线性梯度（135度，#B1B6BE 0%，#FFF 100%）；
}
.myinput[type=“checkbox”]：禁用：之后{
-webkit过滤器：不透明度（0.4）；
}
.myinput[type=“checkbox”]：未（：禁用）：选中：悬停：之后{
背景图片：url数据数据：图像/png；Bas64，IVBoWeWeWeWeWeWeWeWeWeWe数据数据：数据数据：图像/png；基础64，基础64，数据数据数据：图像/数据：图像/png；基础64，基础64，IBoWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeWeAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAATKSUQMCC'）线性梯度（135度，#8BB0C2 0%，#FFF 100%）；
}
.myinput[type=“checkbox”]：不（：禁用）：悬停：之后{
背景图像：线性梯度（135度，#8BB0C2 0%，#FFF 100%）；
边框颜色：#85A9BB#92C2DA#92C2DA#85A9BB；
}
.myinput[type=“checkbox”]：未（：禁用）：悬停：在{
边框颜色：#3D7591；
}
/*大复选框*/
.myinput.large{
高度：22px；
宽度：22px；
}
.myinput.large[type=“checkbox”]：之前{
宽度：20px；
高度：20px；
}
.myinput.large[type=“checkbox”]：之后{
顶部：-20px；
宽度：16px；
高度：16px；
}
/*自定义复选框*/
.myinput.large.custom[type=“checkbox”]：选中：之后{
背景图片：url（'数据：image/png；base64，ivborw0kggoaaaansuhueugaabaaaaqcayaaaaf8/9haaaghrfwhrbdxrob3iabwluzznyywz0aw5mby5jb23fzidlaaak0leqvq4y2p4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+dcbihblaeyz+qZZ/7wpryhnagnmoxjvo/w0/

<input type="checkbox" id="first" />
<label for="first">&nbsp;</label>



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



my_checkbox.is_checked(); // True if checked, else false



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



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



input[type=checkbox].css-checkbox {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

input[type=checkbox].css-checkbox + label.css-label {
    padding-left: 20px;
    height: 15px;
    display: inline-block;
    line-height: 15px;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 15px;
    vertical-align: middle;
    cursor: pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
    background-position: 0 -15px;
}

.css-label{
    background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png);
}



<div id="myContainer">
    <input type="checkbox" name="myCheckbox" id="myCheckbox_01_item" value="red" />
    <label for="myCheckbox_01_item" class="box"></label>
    <label for="myCheckbox_01_item" class="text">I accept the Terms of Use.</label>
</div>



#myContainer {
    outline: black dashed 1px;
    width: 200px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] {
    display: none;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:not(:checked) + label.box {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: black solid 1px;
    background: #FFF ;
    margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:checked + label.box {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: black solid 1px;
    background: #F00;
    margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] + label + label.text {
    font: normal 12px arial;
    display: inline-block;
    line-height: 27px;
    vertical-align: top;
    margin: 5px 0px;
}



label {
    display: inline-block;
    position: relative; /* Needed for checkbox absolute positioning */
    background-color: #eee;
    padding: .5rem;
    border: 1px solid #000;
    border-radius: .375rem;
    font-family: "Courier New";
    font-size: 1rem;
    line-height: 1rem;
}

label > input[type="checkbox"] {
    display: block;
    position: absolute; /* Remove it from the flow */
    width: 100%;
    height: 100%;
    margin: -.5rem; /* Negative the padding of label to cover the "button" */
    cursor: pointer;
    opacity: 0; /* Make it transparent */
    z-index: 666; /* Place it on top of everything else */
}

label > input[type="checkbox"] + span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #000;
    margin-right: .5rem;
}

label > input[type="checkbox"]:checked + span {
    background-color: #666;
}

<label>
    <input type="checkbox" />
    <span>&nbsp;</span>Label text
</label>



<label class="check-box">
  <input type="checkbox">
  <span>Check box Text</span>
</label>



<div class='custom-checkbox'>
    <input type='checkbox' />
    <label>
        <span></span>
        Checkbox label
    </label>
</div>



<style>
    .custom-checkbox {
        position: relative;
    }
    .custom-checkbox input{
        position: absolute;
        left: 0;
        top: 0;
        height:15px;
        width: 50px;    /* Expand the checkbox so that it covers */
        z-index : 1;    /* the label and span, increase z-index to bring it over */
        opacity: 0;     /* the label and set opacity to 0 to hide it. */
    }
    .custom-checkbox input+label {
        position: relative;
        left: 0;
        top: 0;
        padding-left: 25px;
        color: black;
    }
    .custom-checkbox input+label span {
        position: absolute;  /* a small box to display as checkbox */
        left: 0;
        top: 0;
        height: 15px;
        width: 15px;
        border-radius: 2px;
        border: 1px solid black;
        background-color: white;
    }
    .custom-checkbox input:checked+label { /* change label color when checked */
        color: orange;
    }
    .custom-checkbox input:checked+label span{ /* change span box color when checked */
        background-color: orange;
        border: 1px solid orange;
    }
</style>



input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 2em;
  height: 2em;
  border: 1px solid gray;
  outline: none;
  vertical-align: middle;
}

input[type=checkbox]:checked {
  background-color: blue;
}



**Custom checkbox with css**  (WebKit browser solution only Chrome, Safari, Mobile browsers)

    <input type="checkbox" id="cardAccptance" name="cardAccptance" value="Yes">
    <label for="cardAccptance" class="bold"> Save Card for Future Use</label>

    /* The checkbox-cu */

    .checkbox-cu {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 0;
        cursor: pointer;
        font-size: 16px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }


    /* Hide the browser's default checkbox-cu */

    .checkbox-cu input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }


    /* Create a custom checkbox-cu */

    .checkmark {
        position: absolute;
        top: 4px;
        left: 0;
        height: 20px;
        width: 20px;
        background-color: #eee;
        border: 1px solid #999;
        border-radius: 0;
        box-shadow: none;
    }


    /* On mouse-over, add a grey background color */

    .checkbox-cu:hover input~.checkmark {
        background-color: #ccc;
    }


    /* When the checkbox-cu is checked, add a blue background */

    .checkbox-cu input:checked~.checkmark {
        background-color: transparent;
    }


    /* Create the checkmark/indicator (hidden when not checked) */

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }


    /* Show the checkmark when checked */

    .checkbox-cu input:checked~.checkmark:after {
        display: block;
    }


    /* Style the checkmark/indicator */

    .checkbox-cu .checkmark::after {
        left: 7px;
        top: 3px;
        width: 6px;
        height: 9px;
        border: solid #28a745;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        z-index: 100;
    }