ןומיסה תואספוקו וידרה ירותפכ םע קחשל
<form action="../none" id ="radiobox" >

<div id="radios3">
<input name="r2" class="bigRadio" type="radio" />
<input name="r2" class="bigRadio" type="radio" />
</div>

</form>

<form action="../none" id ="radiobox" > <div id="radio">
<input name="r" class="radio" type="radio" />
<input name="r" class="radio" type="radio" />
<input name="r" class="radio" type="radio" />
</div> </form>

<form action="../none" id ="radiobox" > <div id="checkbox">
<input name="r" class="checkbox" type="checkbox" />
<input name="r" class="checkbox" type="checkbox" />
<input name="r" class="checkbox" type="checkbox" />
</div>
</form>
<head>
<STYLE>.checkbox{
display: block;
padding:0;
height: 18px;
width: 18px;
color: #fff;
font-size: 14pt;
background-color: tan;
border-top: 2px ridge beige;
border-left: 2px ridge beige;
border-right: 2px ridge #ffd;
border-bottom: 2px ridge #ffd;
outline:0;
}
.checkbox:focus{
border-top: 2px solid beige;
border-left: 2px solid beige;
border-right: 2px ridge #a99;
border-bottom: 2px ridge #a99;

}
.checkbox:active{
padding:0;
border-top: 2px ridge beige;
border-left: 2px ridge beige;
border-right: 2px ridge #ffc;
border-bottom: 2px ridge #fcc;
padding:0;
}
.radio{
display: block;
padding:0;
height: 20px;
width: 20px;
color: #000;
font-size: 14pt;
background-color: #0f0;
border-top: 2px ridge #090;
border-left: 2px ridge #090;
border-right: 2px ridge #030;
border-bottom: 2px ridge #030;

}
.radio:active{
color: #0f0;
background-color: #393;
border-top: 2px ridge #010;
border-left: 2px ridge #010;
border-right: 2px ridge #090;
border-bottom: 2px ridge #090;

}
.radio:hover{
color: #090;
background-color: #111;
}
.radio:focus{
color: #060;
background-color: #3c3;
outline: 1px solid yellow;
}
.radio:visited{
color: #976;
background-color: #3c3;
outline: 1px solid yellow;
}
.bigRadio{
padding:0;
height: 50px;
width: 50px;
color: #600;
font-size: 14pt;
background-color: transparent;
border-top-color: #900;
border-left-color: #900;
border-right-color: #300;
border-bottom-color: #300;
border-style: ridge;
}
.bigRadio:hover {
color: #600;
background-color: transparent;
background-image: url(../img/lemon.gif);
background-repeat: no-repeat;
background-position: center center;
border-top-color: #900;
border-left-color: #900;
border-right-color: #300;
border-bottom-color: #300;

}
.bigRadio:active {
color: #600;
background-color: transparent;
background-image: url(../img/cherry.gif);
background-repeat: no-repeat;
background-position: center center;
}
.bigRadio:focus {
color: #903;
background-color: transparent;
background-image: url(img/cherry.gif);
background-repeat: no-repeat;
border-top-color: #900;
border-left-color: #900;
border-right-color: #300;
border-bottom-color: #300;
}
</STYLE>