前端开关样式Css实现 兼容IE

js：使用的是bootstrapTable 行渲染方法

function enabledFormater(value, row, index) {
    if (type != 2) {
        if (value == 0) {
            return '<div class="switch"> ' +
                '<input id="cmn-toggle-' + index + '" class="cmn-toggle cmn-toggle-round" checked onchange="changeSwitch(this,' + index + ')" type="checkbox"> ' +
                '<label class="checkbox-label" for="cmn-toggle-' + index + '">' +
                '</label> ' +
                '<span id="check-text-' + index + '" class="s-text-span" style="color: green"> &nbsp;启用</span>' +
                '</div>';
        } else {
            return '<div class="switch"> ' +
                '<input id="cmn-toggle-' + index + '" class="cmn-toggle cmn-toggle-round" onchange="changeSwitch(this,' + index + ')" type="checkbox"> ' +
                '<label class="checkbox-label" for="cmn-toggle-' + index + '">' +
                '</label> ' +
                '<span id="check-text-' + index + '" class="s-text-span" style="color: red"> &nbsp;禁用</span>' +
                '</div>';
        }
    } else {
        // 冻结
        if (value == 0) {
            return '<div class="switch"> ' +
                '<input disabled id="cmn-toggle-' + index + '" class="cmn-toggle cmn-toggle-round" checked onchange="changeSwitch(this,' + index + ')" type="checkbox"> ' +
                '<label class="checkbox-label" for="cmn-toggle-' + index + '">' +
                '</label> ' +
                '<span id="check-text-' + index + '" class="s-text-span" style="color: green"> &nbsp;启用</span>' +
                '</div>';
        } else {
            return '<div class="switch"> ' +
                '<input disabled id="cmn-toggle-' + index + '" class="cmn-toggle cmn-toggle-round" onchange="changeSwitch(this,' + index + ')" type="checkbox"> ' +
                '<label class="checkbox-label" for="cmn-toggle-' + index + '">' +
                '</label> ' +
                '<span id="check-text-' + index + '" class="s-text-span" style="color: red"> &nbsp;禁用</span>' +
                '</div>';
        }
    }
}

function changeSwitch(that,index){
    var textEle = $("#check-text-" + index);
    var sp = $(that);
    var e = tableData[index];
    var v = that.checked;
    var val = 1;
    if (v) {
        val = 0;
        textEle.css("color", "green");
        textEle.html("&nbsp;启用");
    } else {
        textEle.css("color", "red");
        textEle.html("&nbsp;禁用");
    }
    e.enabled = val;
    // console.log('设置enabled为：'+val);


}

 

css样式：

        /* Switch开关样式 */
        .cmn-toggle {
            position: absolute;
            margin-left: -9999px;
            visibility: hidden;
        }
        .cmn-toggle + label {
            display: block;
            position: relative;
            cursor: pointer;
            outline: none;
            user-select: none;
        }

        input.cmn-toggle-round + label {
            padding: 2px;
            width: 36px;
            height: 18px;
            background-color: #dddddd;
            border-radius: 18px;
        }
        input.cmn-toggle-round + label:before,
        input.cmn-toggle-round + label:after {
            display: block;
            position: absolute;
            top: 1px;
            left: 1px;
            bottom: 1px;
            content: "";
        }
        input.cmn-toggle-round + label:before {
            right: 1px;
            background-color: #f1f1f1;
            border-radius: 18px;
            transition: background 0.4s;
        }
        input.cmn-toggle-round + label:after {
            width: 15px;
            background-color: #fff;
            border-radius: 100%;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            transition: margin 0.4s;
        }
        input.cmn-toggle-round:checked + label:before {
            background-color: #0d6efd;
        }
        input.cmn-toggle-round:checked + label:after {
            margin-left: 18px;
        }

        .checkbox-label{
            float: left;
        }
        .switch{
            display: inline-block;
        }

 

效果

 

 

在其他环境下使用 将html 和css代码提出来即可