Radio button causes browser to jump to the top
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
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.