自定义复选框的位置有抖动

custom checkbox have jerking with its postioning

本文关键字：抖动 位置 复选框 自定义      更新时间：2023-09-26

我已经尝试过jQuery和CSS的复选框功能。但是在单击复选框时，有些在复选框的位置抽搐。你可以在这里找到jsfiddle，在这里我为该span元素定义了display: inline-block。

但是当我定义display: block时也是如此，我不知道为什么内联块会带来抽搐。JSfiddle 链接在这里。

<span name="list4_wrap"  id="check4wrap" class=" e-checkwrap"></span>
 #css
 .e-checkwrap {
        border: 1px solid;
        height: 14px;
        width: 14px;
        display: block;
        border-color: #c8c8c8;
        background-color: #fff;
        cursor: pointer;
            font-size: 12px;   
    }
    .e-check-act:before {
        content: "a";
        width: 100%;
        height: 100%;
        color: #179bd7;
        text-indent: 1px;
    }
#JS
$("#check4wrap").click(function(e){
    var curEle = e.target.nodeName === "INPUT" ? e.target.parentElement : e.target;
        if (curEle.className.indexOf("e-check-act") < 0) {
            curEle.className += " e-check-act";               
        }
        else {
            curEle.className = curEle.className.replace("e-check-act", " ");               
        }
});

请对此提出一些建议。

这是因为

您在 .e-check-act 之前附加文本这改变了它的位置。

设置.e-check-act:before { position:absolute; }，它将保持在原位。

相关文章：