html – 为什么检查这些自定义复选框会将屏幕位置移到顶部？

我使用这里描述的方法使用自定义复选框：
http://www.csscheckbox.com/

下面是我的演示链接,如果您向下滚动并检查任何自定义复选框,屏幕将自动滚动回到顶部由于某种原因.你会怎么防止这种情况？

http://leongaban.com/_stack/check/demo.html

HTML

Box" name="check-1" id="check-1" class="css-checkBox" />
        css-label radGroup1">Option 1Box" name="check-2" id="check-2" class="css-checkBox" />
        css-label radGroup1">Option 2Box" name="check-3" id="check-3" class="css-checkBox" />
        css-label radGroup1">Option 3


CSS

input[type=checkBox].css-checkBox {
    position:absolute;
    z-index:-1000;
    top:-1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height:1px;
    width:1px;
    margin:-1px;
    padding:0;
    border:0;
}

input[type=checkBox].css-checkBox + label.css-label,input[type=checkBox].css-checkBox + label.css-    label.clr {
    padding-left:22px;
    height:17px; 
    display:inline-block;
    line-height:17px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size:17px;
    vertical-align:middle;
    cursor:pointer;
}

input[type=checkBox].css-checkBox:checked + label.css-label,input[type=checkBox].css-checkBox + label.css-label.chk {
    background-position: 0 -17px;
}

label.css-label {
    background-image:url(http://csscheckBox.com/checkBoxes/u/csscheckBox_8fa6297cf86891252915e1a1f59b58df.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


最佳答案
您必须从此类中删除top：-1000px：

input[type=checkBox].css-checkBox {
    position:absolute;
    z-index:-1000;
    /*top:-1000px;*/
    overflow: hidden;
    clip: rect(0 0 0 0);
    height:1px;
    width:1px;
    margin:-1px;
    padding:0;
    border:0;
}

.block {
    padding: 40px;
    height: 1200px;
    font-family: Arial;
    text-align: center;
    /*line-height: 1200px;*/
    color: white;
    background: blue;
}
li {
    list-style: none;
}
input[type=checkBox].css-checkBox {
    position:absolute;
    z-index:-1000;
    /*top:-1000px;*/
    overflow: hidden;
    clip: rect(0 0 0 0);
    height:1px;
    width:1px;
    margin:-1px;
    padding:0;
    border:0;
}

input[type=checkBox].css-checkBox + label.css-label,input[type=checkBox].css-checkBox + label.css-label.clr {
    padding-left:22px;
    height:17px;
    display:inline-block;
    line-height:17px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size:17px;
    vertical-align:middle;
    cursor:pointer;   
    position: relative;
}
input[type=checkBox].css-checkBox:checked + label.css-label,input[type=checkBox].css-checkBox + label.css-label.chk {
    background-position: 0 -17px;
}

label.css-label {
    background-image:url(http://csscheckBox.com/checkBoxes/u/csscheckBox_8fa6297cf86891252915e1a1f59b58df.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
Box" name="check-1" id="check-1" class="css-checkBox">
        css-label radGroup1">Option 1Box" name="check-2" id="check-2" class="css-checkBox">
        css-label radGroup1">Option 2Box" name="check-3" id="check-3" class="css-checkBox">
        css-label radGroup1" style="
    display: block;
    position: relative;
    overflow: hidden;
">Option 3


 原文链接：https://www.f2er.com/css/427632.html

html – 为什么检查这些自定义复选框会将屏幕位置移到顶部？

猜你在找的CSS相关文章