<style>
@import "http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css";
.widget{
position:relative;
height:32px;
display:inline-block;
vertical-align:baseline;
zoom:1;
*display:inline;
*vertical-align:auto;
}
.widget li{
float:left;
padding:2px 1px;
}
.widget label{
display:block;
position:relative;
width:30px;
height:15px;
background:#adadad;
border-radius:10px;
font:0/0 serif;
text-shadow:none;
color:transparent;
-webkit-box-shadow:inset 0 1px 3px 1px rgba(0, 0, 0, 0.5), inset 0 5px 5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.6);
box-shadow:inset 0 1px 3px 1px rgba(0, 0, 0, 0.5), inset 0 5px 5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.6);
}
.widget label:hover{
background:#bfbfbf;
}
.widget input:checked+label, .widget label:active{
height:15px;
width:30px;
background:#508fee;
border:0px solid #1f2128;
border-color:rgba(0, 0, 0, 0.7);
background-image:-webkit-linear-gradient(top, #83bcff 0%, #508fee 40%, #1644c2 100%);
background-image:-moz-linear-gradient(top, #83bcff 0%, #508fee 40%, #1644c2 100%);
background-image:-o-linear-gradient(top, #83bcff 0%, #508fee 40%, #1644c2 100%);
background-image:linear-gradient(to bottom, #83bcff 0%, #508fee 40%, #1644c2 100%);
-webkit-box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 1px 1px rgba(255, 255, 255, 0.6);
box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 1px 1px rgba(255, 255, 255, 0.6);
}
.widget input{
display:none;
}
</style>
<div class="container">
<div class="widget">
<ul>
<script>
var a=1;
for(var b=1; b<200; b++){
for(var c=0; c<4; c++){
document.write('<li><input type="radio" name="'+a+'" id="'+b+'" value="'+b+'"><label for="'+b+'">'+b+'</label></li>\n');
b++;
}
document.write(a+'<br>\n');
b--;
a++;
}
for(i=1; i<1200; i++){
var allRadios=document.getElementsByName(i),
booRadio,
x=0;
for(x=0; x<allRadios.length; x++){
allRadios[x].onclick=function(){
if(booRadio == this){
this.checked=false;
booRadio=null;
}
else
booRadio=this;
}
}
}
</script>
</ul>
</div>
</div>
حمایت شده: