Menu
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 page.
Note: This issue is inconsistent across different browsers -- It occurs in safari and chrome, and it does not occur in firefox or opera
How can I prevent the browser from jumping the scroll to the top of the page when clicking the radio button's label?
<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>
.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;
}
233
checked = true; We first checked the yes radio button, but when we checked the no button, the yes button got automatically unchecked. You can set a radio button to be checked by default by setting the checked property directly on the input field.
Answer: To make a radio button not selectable, in the button's INPUT tag you can use an onclick event handler like this: <INPUT type="radio" name="myButton" value="theValue" onclick="this. checked=false; alert('Sorry, this option is not available!') ">
The tabindex attribute must be placed by default on the container of each radio button, and its value set dynamically according to the state of the radio buttons: If no button is selected: tabindex="0" on the first and last radio button of the group and tabindex="-1" on the other radio buttons.
You can check a radio button by default by adding the checked HTML attribute to the <input> element. You can disable a radio button by adding the disabled HTML attribute to both the <label> and the <input> .
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.
53
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
