انجمن کدستانMoisrex

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