Geek Answers Handbook

How to change the bootstrap style?

ive looked at how to change the bootstrap checkbox style, and CHECKED OTHER ATTEMPTS! Made here, however, each attempt was not successful, so there is a way to successfully change the bootstrap flag style or normal flag.

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

http://jsfiddle.net/s12jx7su/

UPDATED

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

+4
source share
3 answers

Here's a demo bootply for custom checkboxes that I use, implementing bootstraps of glyphics for icons. They are divided into regular checkboxes in IE8 without any additional code.

Here is the relevant 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 HTML:

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

HTH, -Ted

+12
source

checkbox 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

+1

Perhaps this is not only about the style of the flag, but you can use the icons for each of the states of the flag. For example, http://fontawesome.io/icon/square-o/ for an unverified state and http://fontawesome.io/icon/check-square-o/ for a checked state. For AngularJs, it might be something like this:

<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>
0
source

More articles:


All Articles