如何更改引导复选框的样式

ive been looking on how to change the style of a bootstrap checkbox, and HAVE CHECKED THE OTHER ATTEMPTS! Made on here however every single attempt has not been successful, so is there a way to successfully change the style of a bootstrap check box or a normal checkbox.

我一直在研究如何改变引导复选框的样式，并检查了其他的尝试!这里所做的每一次尝试都没有成功，所以是否有一种方法可以成功地改变引导复选框或常规复选框的样式。

<label>text</label>
<input type="checkbox"/>

http://jsfiddle.net/s12jx7su/

UPDATED

更新

http://jsfiddle.net/s12jx7su/1/

3 个解决方案

#1

Here's a demo bootply for custom checkboxes that I use, implementing bootstraps glyphicons for the icons. These degrade to ordinary checkboxes in IE8 without any additional code.

下面是我使用的自定义复选框的一个示例，它实现了图标的引导符号图标。在IE8中，没有任何附加代码，它们就会降级为普通的复选框。

Here's the relevant CSS:

这里有相关的CSS:

    .custom-checkbox > [type="checkbox"],
    .custom-checkbox > label{
        margin-bottom:0px !important;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .custom-checkbox > [type="checkbox"]:not(:checked),
    .custom-checkbox > [type="checkbox"]:checked {
        position: absolute;
        left: -9999px;
    }
    .custom-checkbox > [type="checkbox"]:not(:checked) + label,
    .custom-checkbox > [type="checkbox"]:checked + label {
        position: relative;
        padding-left: 22px;
        cursor: pointer;
    }
    .custom-checkbox > [type="checkbox"]:not(:checked) + label:before,
    .custom-checkbox > [type="checkbox"]:checked + label:before {
        content: '';
        position: absolute;
        left:0; 
        top: 50%;
        margin-top:-9px;
        width: 17px; 
        height: 17px;
        border: 1px solid #ddd;
        background: #ffffff;
        border-radius: 2px;
    }
    .custom-checkbox > [type="checkbox"]:not(:checked) + label:after,
    .custom-checkbox > [type="checkbox"]:checked + label:after {
        font: normal normal normal 12px/1 'Glyphicons Halflings';
        content: '\e013';
        position: absolute;
        top: 50%;
        margin-top:-7px;
        left: 2px;
        color: #94C947;
        xtransition: all .2s;
    }

    .custom-checkbox > [type="checkbox"]:not(:checked) + label:after {
        opacity: 0;
        transform: scale(0);
    }
    .custom-checkbox > [type="checkbox"]:checked + label:after {
        opacity: 1;
        transform: scale(1);
    }

    .custom-checkbox > [type="checkbox"][data-indeterminate] + label:after,
    .custom-checkbox > [type="checkbox"][data-indeterminate] + label:after {
        content: '\2212';
        left: 2px;
        opacity: 1;
        transform: scale(1);
    }

    .custom-checkbox > [type="checkbox"]:disabled:not(:checked) + label:before,
    .custom-checkbox > [type="checkbox"]:disabled:checked + label:before {
        box-shadow: none;
        background-color: #eeeeee;
        border-color: #eeeeee;
        cursor: not-allowed;
        opacity: 1;
        color: #dadada;
    }
    .custom-checkbox > [type="checkbox"]:disabled:checked + label:after {
      color: #dadada; cursor: not-allowed;
    }
    .custom-checkbox > [type="checkbox"]:disabled + label {
      color: #aaa; cursor: not-allowed;
    }
    .custom-checkbox > [type="checkbox"]:checked:focus + label:before,
    .custom-checkbox > [type="checkbox"]:not(:checked):focus + label:before {
        border: 1px solid #66afe9;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }
    .custom-checkbox > label:hover:before {
        border: 1px solid #88D2FF !important;
    }
    .custom-checkbox > [type="checkbox"]:disabled:not(:checked) + label:hover:before,
    .custom-checkbox > [type="checkbox"]:disabled:checked + label:hover:before{
        border: 1px solid #E4E4E4 !important;
    }

and the HTML:

HTML:

<div class="custom-checkbox">
    <input type="checkbox" id="cb1">
    <label for="cb1">Fancy Checkbox</label>
 </div>

HTH, -Ted

HTH,泰德

#2

here is an expmle of how to style checkbox within bootstrap 3 :

以下是如何在bootstrap 3中对复选框进行样式设置的详细说明:

label {
    cursor: pointer;
}
div {
    margin-bottom: 50px;
}

/* Checkbox */
input[type="checkbox"] {
    /* IE opacity hacks */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    margin-left: 100px;
}
.cb-label {
    position: relative;
}
.cb-label:before {
    content: ' ';
    position: absolute;
    background: transparent url(http://blog.parkji.co.uk/images/posts/styling-checkboxes/switch.jpg) no-repeat scroll 0 0;
    height: 41px;
    width: 143px;
    left: -150px
}
input[type="checkbox"]:checked ~ .cb-label:before,
/* the .checked class is used by IE only */
input[type="checkbox"].checked ~ .cb-label:before {
    background-position: 0 -40px;
}

LIVE DEMO

现场演示

#3

Maybe this is not exactly about the checkbox style, but you may consider using icons for each of checkbox state. For example http://fontawesome.io/icon/square-o/ for not checked state and http://fontawesome.io/icon/check-square-o/ for checked state. For AngularJs it might be something like this:

也许这与复选框的样式并不完全相关，但是您可以考虑为每个复选框状态使用图标。例如http://fontawesome。io/图标/方形/不检查状态和http://fontawesome。io /图标/ check-square-o /检查状态。对于AngularJs来说可能是这样的:

<div ng-show="checked"><i class="fa fa-check-square-o" aria-hidden="true"></i></div>

<div ng-show="not-checked"><i class="fa fa-square-o" aria-hidden="true"></i></div>

#1