我尝试过使用 jQuery 和 CSS 实现类似复选框的功能。但是在单击复选框时,复选框的位置有些抽动。您可以在 here 中找到 jsfiddle ,在这里我为 span
元素定义了 display: inline-block
。
但是当我定义 display: block
时同样有效,我不知道为什么内联 block 会出现这种抽动。 here 中的 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; }
并且它留在原地。
关于javascript - 自定义复选框的定位有问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35366664/