欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

單選按鈕使瀏覽器跳轉(zhuǎn)到頂部

CSS

當(dāng)點(diǎn)擊一個(gè)標(biāo)簽時(shí)(對(duì)于一個(gè)單選按鈕，它被有意地隱藏在屏幕之外)，瀏覽器會(huì)意外地跳到頁(yè)面的頂部。

注意:這個(gè)問(wèn)題在不同的瀏覽器中是不一致的——它發(fā)生在safari和chrome中，而不會(huì)發(fā)生在firefox或opera中

問(wèn)題: 如何防止瀏覽器在單擊單選按鈕的標(biāo)簽時(shí)跳轉(zhuǎn)到頁(yè)面頂部？

示例代碼: 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;
}

有意思。我不知道它為什么會(huì)這樣，但是修復(fù)不需要的行為很容易:將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/.

。 順便說(shuō)一下，在每個(gè)單選按鈕上設(shè)置checked是沒(méi)有用的——實(shí)際上只有最后一個(gè)被選中。它會(huì)使你的代碼失效。此外，在無(wú)線電輸入組周?chē)枰韱螛?biāo)記。

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

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

不要設(shè)置最高值

接受的答案不可訪問(wèn):可見(jiàn)性:隱藏；將對(duì)屏幕閱讀器隱藏您的內(nèi)容。不管怎樣，問(wèn)題就在這里:

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

具體來(lái)說(shuō)，最上面:-9999；導(dǎo)致瀏覽器試圖到達(dá)那個(gè)點(diǎn)。

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

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

注意頂部:auto這應(yīng)該可以阻止跳躍。

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

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

這樣，輸入總是在“視圖”中，所以標(biāo)簽不必強(qiáng)行滾動(dòng)到它。 “top: 0”是可選的，對(duì)我來(lái)說(shuō)，它默認(rèn)在屏幕的中間，我只是明確地把它放在某個(gè)地方。

只需添加& quot顯示:無(wú)& 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>

瀏覽器之所以會(huì)跳轉(zhuǎn)，是因?yàn)檩斎?單選或復(fù)選框)和它的標(biāo)簽相距很遠(yuǎn)，當(dāng)你點(diǎn)擊可見(jiàn)標(biāo)簽時(shí)，輸入獲得焦點(diǎn)，所以瀏覽器就去輸入(焦點(diǎn))所在的地方。

更改布局:將輸入、標(biāo)簽和標(biāo)簽的::before元素放在一個(gè)網(wǎng)格中。網(wǎng)格固定了位置，因此您可以當(dāng)場(chǎng)隱藏輸入。這樣，標(biāo)簽和輸入就不會(huì)分開(kāi)，所以焦點(diǎn)不會(huì)出現(xiàn)問(wèn)題:

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

顯示:無(wú)；或可見(jiàn)性:隱藏-& gt；不會(huì)幫助你，如果你需要一個(gè)平易近人:( 這將解決一個(gè)頁(yè)面滾動(dòng)的問(wèn)題，但會(huì)給屏幕閱讀器帶來(lái)一個(gè)問(wèn)題。

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

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