色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

單選按鈕使瀏覽器跳轉到頂部

CSS
錢琪琛2年前11瀏覽0評論

當點擊一個標簽時(對于一個單選按鈕，它被有意地隱藏在屏幕之外)，瀏覽器會意外地跳到頁面的頂部。

注意:這個問題在不同的瀏覽器中是不一致的——它發生在safari和chrome中，而不會發生在firefox或opera中

問題: 如何防止瀏覽器在單擊單選按鈕的標簽時跳轉到頁面頂部？

示例代碼: JS小提琴 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;
}

有意思。我不知道它為什么會這樣，但是修復不需要的行為很容易:將radio輸入的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>

此處更新js fiddle:http://jsfiddle.net/XkQ7T/1/.

。 順便說一下，在每個單選按鈕上設置checked是沒有用的——實際上只有最后一個被選中。它會使你的代碼失效。此外，在無線電輸入組周圍需要表單標記。

我也有同樣的問題，我用的是@Frank Conijn的解決方案，但是如果電臺設置能見度:隱藏；或者顯示:none，標簽(for="#id ")在IE8中不起作用，最后，我這樣修復它:

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

不要設置最高值

接受的答案不可訪問:可見性:隱藏；將對屏幕閱讀器隱藏您的內容。不管怎樣，問題就在這里:

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

具體來說，最上面:-9999；導致瀏覽器試圖到達那個點。

我喜歡用下面的參數設置一個類來隱藏這樣的東西。然后你可以把它貼在任何地方:

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

注意頂部:auto這應該可以阻止跳躍。

這就是我所做的，它工作得很好，并且仍然允許可訪問性。

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

這樣，輸入總是在“視圖”中，所以標簽不必強行滾動到它。 “top: 0”是可選的，對我來說，它默認在屏幕的中間，我只是明確地把它放在某個地方。

只需添加& quot顯示:無& quot至單選按鈕。

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

如果你自定義你的單選按鈕，不要用display:none隱藏它，也不要用big left:-9999px。

最好使用不透明度:0，寬度:1px，高度:1px，讓單選按鈕靠近你的假單選按鈕

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

</style>

瀏覽器之所以會跳轉，是因為輸入(單選或復選框)和它的標簽相距很遠，當你點擊可見標簽時，輸入獲得焦點，所以瀏覽器就去輸入(焦點)所在的地方。

更改布局:將輸入、標簽和標簽的::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>

顯示:無；或可見性:隱藏-& gt；不會幫助你，如果你需要一個平易近人:( 這將解決一個頁面滾動的問題，但會給屏幕閱讀器帶來一個問題。

這種變體對我很有效(謝謝@James Hang！):

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