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

Question

我正在使用此处描述的方法使用自定义复选框: http://www.csscheckbox.com/

下面是我的演示链接，如果您向下滚动并选中任何自定义复选框，屏幕会出于某种原因自动滚动回顶部。你会如何防止这种情况发生？

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

HTML

<ul>
    <li>
        <input type="checkbox" name="check-1" id="check-1" class="css-checkbox" />
        <label for="check-1" class="css-label radGroup1">Option 1</label>
    </li>
    <li>
        <input type="checkbox" name="check-2" id="check-2" class="css-checkbox" />
        <label for="check-2" class="css-label radGroup1">Option 2</label>
    </li>
    <li>
        <input type="checkbox" name="check-3" id="check-3" class="css-checkbox" />
        <label for="check-3" class="css-label radGroup1">Option 3</label>
    </li>
</ul>

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;
}

Answer 1

你必须从这个类中删除 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;
}

<div class="block">1200px tall, scroll down</div>
<ul>
    <li>
        <input type="checkbox" name="check-1" id="check-1" class="css-checkbox">
        <label for="check-1" class="css-label radGroup1">Option 1</label>
    </li>
    <li>
        <input type="checkbox" name="check-2" id="check-2" class="css-checkbox">
        <label for="check-2" class="css-label radGroup1">Option 2</label>
    </li>
    <li>
        <input type="checkbox" name="check-3" id="check-3" class="css-checkbox">
        <label for="check-3" class="css-label radGroup1" style="
    display: block;
    position: relative;
    overflow: hidden;
">Option 3</label>
    </li>
</ul>