jquery-grid/css/checkbox.css

jQuery Grid by Gijgo.com is a plug-in for the jQuery Javascript library. It is a very fast and extandable datagrid, and will add advanced interaction controls to any HTML table. This plugin has build-in integration with Bootstrap and Material Design. Free

/* Bootstrap */
.gj-checkbox-bootstrap {
    min-width: 0;
    font-size: 0;
    font-weight: normal;
    margin: 0px;
    text-align: center;
    width: 18px;
    height: 18px;
    position: relative;
    display: inline;
}

.gj-checkbox-bootstrap input[type="checkbox"] {
    display: none;
    margin-bottom: -12px;
}

.gj-checkbox-bootstrap span {
    background: #fff;
    display: block;
    content: " ";
    width: 18px;
    height: 18px;
    line-height: 11px;
    font-size: 11px;
    padding: 2px;
    color: #555555;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    transition: box-shadow 0.2s linear, border-color 0.2s linear;
    cursor: pointer;
    margin: auto;
}

.gj-checkbox-bootstrap input[type="checkbox"]:focus + span:before {
    outline: 0;
    box-shadow: 0 0 0 0 #66afe9, 0 0 6px rgba(102, 175, 233, .6);
    border-color: #66afe9;
}

.gj-checkbox-bootstrap input[type="checkbox"][disabled] + span {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Bootstrap 4 */
.gj-checkbox-bootstrap.gj-checkbox-bootstrap-4 span {
    line-height: 16px;
    padding: 0px;
}

.gj-checkbox-bootstrap-4.gj-checkbox-material-icons input[type="checkbox"]:checked + span:after {
    font-size: 16px;
}

.gj-checkbox-bootstrap-4.gj-checkbox-material-icons input[type="checkbox"]:indeterminate + span:after {
    font-size: 16px;
}

/* Material Design */
.gj-checkbox-md {
    min-width: 0;
    font-size: 0;
    font-weight: normal;
    margin: 0px;
    text-align: center;
    width: 16px;
    height: 16px;
    position: relative;
}

.gj-checkbox-md input[type="checkbox"] {
    display: none;
    margin-bottom: -12px;
}

.gj-checkbox-md span {
    display: inline-block;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    overflow: hidden;
    border: 2px solid #616161; /* Gray 700 */
    border-radius: 2px;
    z-index: 2;
}

.gj-checkbox-md input[type="checkbox"]:checked + span {
    border: 2px solid #536DFE; /* Indigo A200 */
}

.gj-checkbox-md input[type="checkbox"]:checked + span:after {
    color: #FFF;
    background-color: #536DFE; /* Indigo A200 */
    position: absolute;
    left: 1px;
    top: -15px;
}

.gj-checkbox-md input[type="checkbox"]:indeterminate + span {
    border: 2px solid #616161; /* Gray 700 */
}

.gj-checkbox-md input[type="checkbox"]:indeterminate + span:after {    
    color: #616161;/*color: rgba(0, 0, 0, 1);*/
    position: absolute;
    left: 1px;
    top: -15px;
}

.gj-checkbox-md input[type="checkbox"][disabled] + span {
    border: 2px solid #9E9E9E;
}

.gj-checkbox-md input[type="checkbox"][disabled] + span:after {
    background-color: #9E9E9E;
}

.gj-checkbox-md input[type="checkbox"][disabled]:indeterminate + span:after {
    color: #FFFFFF;
}

/* Material Icons */
.gj-checkbox-material-icons input[type="checkbox"]:checked + span:after {
    content: "\e91f";
    font-size: 14px;
    font-weight: bold;
    white-space: pre;
}

.gj-checkbox-material-icons input[type="checkbox"]:indeterminate + span:after {
    content: "\e921";
    font-size: 14px;
    font-weight: bold;
    white-space: pre;
}

/* Glyphicons */
.gj-checkbox-glyphicons input[type="checkbox"]:checked + span:after {
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    content: "\e013 ";
}

.gj-checkbox-glyphicons input[type="checkbox"]:indeterminate + span:after {
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    content: "\2212 ";
    padding-right: 1px;
}

/* fontawesome */
.gj-checkbox-fontawesome .fa {
    font-size: 14px;
}
.gj-checkbox-bootstrap.gj-checkbox-fontawesome .fa {
    line-height: 18px;
}

.gj-checkbox-fontawesome input[type="checkbox"]:checked + span:before {
    content: "\f00c ";
}

.gj-checkbox-fontawesome input[type="checkbox"]:indeterminate + span:before {
    content: "\f068 ";
}