Radio button causes browser to jump to the top

后端未结

关注

 5  544

Problem:

When clicking on a label (for a radio button that has been intentionally hidden by positioning it off-screen), the browser undesirably jumps to the top of the

相关标签:

5条回答

失恋的感觉

2021-02-05 15:07
Just add opacity: 0; to your input[type="radio"] like this
```
input[type="radio"] {
  opacity: 0;
  position: absolute;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
你的背包

2021-02-05 15:08
The accepted answer is not accessible: visibility: hidden; will hide your content from screen readers. Regardless, the trouble is here:
```
.rdbut label input {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
```
Specifically, the top: -9999; is causing the browser to try and go up to that point.

I like to set a class for hiding stuff like this, with the following parameters. Then you can just stick it anywhere:
```
.visually-hidden {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
```
Note the top: auto; which should prevent the jump.
0 讨论(0)
发布评论:

提交评论
- 加载中...

北恋

2021-02-05 15:11

Interesting. I don't know exactly why it behaves that way, but curing the unwanted behavior is easy: exchange the CSS top and left values of the radio inputs for visibility: hidden.

Like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
    #content {
        width: 500px;
    }
    .rdbut {
        margin:0px;
    }
    .rdbut label {
        float:left;
        width:65px;
        margin:4px;
        background-color:#EFEFEF;
        border:none;
        overflow:auto;
        display:inline;
    }
    .rdbut label span {
        text-align:center;
        font-size: 12px;
        padding:3px 8px;
        display:block;
    }
    .rdbut label input {
        position:absolute;
        t/op: -9999px;
        l/eft: -9999px;
        visibility: hidden;
    }
    .rdbut input:checked + span {
        background-color:#404040;
        color:#F7F7F7;
    }
    .rdbut .colour {
        background-color:#FF8E22;
        color:#ffffff;
    }
    </style>
</head>
<body>
    <div id="content">
        <p>"Lorem ipsum" goes here.
        </p>
        <div class="rdbut">
            <label class="colour"><input id="option-AVGANT1Y2PC" type="radio" name="Multi-licence" value="1 Year 2 PC|+23.99|0" checked="checked" />
            <span>£24.99</span></label>
        </div>
        <div class="rdbut">
            <label class="colour"><input id="option-AVGANT2Y2PC" type="radio" name="Multi-licence" value="2 Year 2 PC|+34.00|0" checked="checked" />
            <span>£35.00</span></label>
        </div>
        <div class="rdbut">
            <label class="colour"><input id="option-AVGANT1Y2PC" type="radio" name="Multi-licence" value="1 Year 2 PC|+23.99|0" checked="checked" />
            <span>£24.99</span></label>
        </div>
    </div>
</body>
</html>

Updated JSFiddle here: http://jsfiddle.net/XkQ7T/1/.

.
By the way, setting checked on every radio button is no use - only the last one is actually checked. And it invalidates your code. Also, you need form tags around the group of radio inputs.

0 讨论(0)

星月不相逢

2021-02-05 15:12
Here's what I did, and it worked well and still allowed for accessibility.
```
.hiddenInput {
  opacity: 0;
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
}
```
That way the input is always in "view" so the label never has to forcibly scroll to it. The 'top: 0' is optional, for me it defaulted to the middle of my screen, I just put it somewhere explicitly.
0 讨论(0)
发布评论:

提交评论
- 加载中...
迷失自我

2021-02-05 15:17
I have the same problem, I use @Frank Conijn's solution,but if the radio set visibility: hidden; or display:none,the label(for="#id") not work in IE8, at last, I fix it like this:
```
.rdbut label input {
  position:absolute;
 left: -9999px;
 }
```
do not set top value
0 讨论(0)
发布评论:

提交评论
- 加载中...