Click to select
.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; }
