css 单选按钮使浏览器跳到顶部

vshtjzan 于 2023-05-19 发布在其他

关注(0)|答案(8)|浏览(111)

问题：

当点击一个标签时（对于一个单选按钮，它被故意隐藏在屏幕之外），浏览器会不期望地跳到页面的顶部。

注意：此问题在不同的浏览器中不一致-它发生在Safari和Chrome中，而不会发生在Firefox或Opera中 *

提问：

如何防止浏览器在单击单选按钮的标签时将滚动条跳到页面顶部？

示例代码：

· JS Fiddle

· HTML

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

· CSS

.rdbut {
    margin: 0px;
}

.rdbut label {
    float: left;
    width: 65px;
    margin: 4px;
    background-color: #EFEFEF;
    box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.25);
    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;
    top: -9999px;
    left: -9999px;
}

.rdbut input:checked+span {
    background-color: #404040;
    color: #F7F7F7;
}

.rdbut .colour {
    background-color: #FF8E22;
    color: #ffffff;
}

css

来源：https://stackoverflow.com/questions/24299567/radio-button-causes-browser-to-jump-to-the-top

8条答案

按热度按时间

b1uwtaje1#

真有趣我不知道它为什么会这样，但治愈不想要的行为很容易：将无线电输入的CSS top和left值交换为visibility: hidden。
像这样：

<!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>

更新JSFiddle：http://jsfiddle.net/XkQ7T/1/。
.
顺便说一句，在每个单选按钮上设置checked是没有用的-只有最后一个实际上被选中。它会使你的代码无效。此外，您需要在无线电输入组周围使用form标记。

赞(0）回复(0）举报 2023-05-19

j91ykkif2#

我也有同样的问题，我使用@Frank Conijn的解决方案，但如果无线电设置visibility: hidden;或display:none，标签（for="#id”）在IE8中不起作用，最后，我这样修复它：

.rdbut label input {
  position:absolute;
 left: -9999px;
 }

不设置top值

赞(0）回复(0）举报 2023-05-19

v8wbuo2f3#

接受的答案不可访问：visibility: hidden;将hide your content from screen readers。不管怎样，麻烦就在这里：

.rdbut label input {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

具体来说，top: -9999;会导致浏览器尝试访问该点。

我喜欢设置一个类来隐藏这样的东西，使用以下参数。你可以把它放在任何地方：

.visually-hidden {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

注意top: auto;，它应该可以防止跳转。

赞(0）回复(0）举报 2023-05-19

nwlqm0z14#

这就是我所做的，它工作得很好，仍然允许访问。

.hiddenInput {
  opacity: 0;
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
}

这样，输入总是在“视图”中，因此标签永远不必强制滚动到它。“top：0”是可选的，对我来说，它默认在屏幕中间，我只是把它显式地放在某个地方。

赞(0）回复(0）举报 2023-05-19

zvms9eto5#

只需在单选按钮中添加“display：none”即可。

input[type="radio"]{display:none;}

赞(0）回复(0）举报 2023-05-19

tzcvj98z6#

如果您自定义了单选按钮，请不要使用display：none将其隐藏在页面中，也不要使用bigleft：-9999px。
最好使用不透明度：0，宽度：1 px，高度：1 px，让收音机接近你的假单选按钮

<style>
.radio-button__container{
  position: relative
}
.radio-button{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  bottom: 0; 
  left: 0;
}

</style>

赞(0）回复(0）举报 2023-05-19

1l5u6lss7#

浏览器跳转的原因是输入（单选或复选框）及其标签彼此远离，当您单击可见的label时，input获得焦点，因此浏览器转到input（焦点）所在的位置。
更改布局：将标签的input、label和::before元素放在网格中。网格固定位置，因此您可以当场隐藏输入。这样标签和输入就不会发散，所以焦点不会产生问题：

<style>
    div {
        display: grid;
        grid-template-columns: auto;
    }
    input {
        display: none;
        grid-column: 1 / 2;
    }
    label {
        grid-column: 1 / 2;
        display: grid;
        grid-template-columns: auto auto;
    }
    label::before {
        grid-column: 1 / 2;
        content: "";
        /* all necessary styling for the fancy input*/
    }
    </style>

    <html>
    <div>
       <input type="radio" id="a"><label for="a">Label text</label>
    </div>
    </html>

赞(0）回复(0）举报 2023-05-19

py49o6xq8#

display：none;或可见性：hidden - >不会帮助你，如果你需要一个可访问的：（它将修复一个页面滚动的问题，但为屏幕阅读器创建一个问题。
这个变体对我很好（谢谢@James Hang！）：

input{
          opacity: 0;
          height: 0;
          width: 0;
          margin: 0;
          padding: 0;
          position: fixed;
          top: 0;
    }

赞(0）回复(0）举报 2023-05-19

我来回答

css 单选按钮使浏览器跳到顶部

问题：

提问：

示例代码：

· JS Fiddle

· HTML

· CSS

8条答案

相关问题

热门标签

最新问答