Alternative solution ... slightly smaller.
<!DOCTYPE HTML>
<html>
<head>
<title> Radio Button Colors </title>
<script type="text/javascript">
// For: http://www.webdeveloper.com/forum/showthread.php?t=247592
function setRBtn(RBtnGroup,which) {
var sel = document.getElementsByName(RBtnGroup);
for (var i=0; i<sel.length; i++) {
if (i == which) {
sel[i].checked = true;
document.getElementById('colorChosen').style.backgroundColor=sel[i].value;
}
}
}
// Following is not needed, only for demo
function toggleDisplay(IDS, flag) {
var tmp = document.getElementById(IDS);
if (flag == true) { tmp.style.display = 'inline'; }
else { tmp.style.display = 'none'; }
}
</script>
<style type="text/css">
#color_Options li {
width: 50px; height: 50px;
border: solid 1px #000;
list-style-type:none;
float:left;margin:5px 5px;
}
.blue {background-color: blue;}
.green {background-color: green;}
.sherbert {background-color: orange;}
.yellow {background-color: yellow;}
.red {background-color: red;}
.black {background-color: black;}
.white { background-color: white;}
</style>
</head>
<body>
// Following is not needed, only for demo
<input type="checkbox" onchange="toggleDisplay('RBtnBlock',this.checked)">
<div id="RBtnBlock" style="display:none">
<!-- change to 'block' for testing and 'none' after testing -->
<input type="radio" name="RBtn" value="white"> White
<input type="radio" name="RBtn" value="blue"> Blue
<input type="radio" name="RBtn" value="green"> Green
<input type="radio" name="RBtn" value="orange"> Orange
<input type="radio" name="RBtn" value="yellow"> Yellow
<input type="radio" name="RBtn" value="red"> Red
<input type="radio" name="RBtn" value="black"> Black
</div>
<ul id="color_Options">
<li class="white" onclick="setRBtn('RBtn',0)"></li>
<li class="blue" onclick="setRBtn('RBtn',1)"></li>
<li class="green" onclick="setRBtn('RBtn',2)"></li>
<li class="sherbert" onclick="setRBtn('RBtn',3)"></li>
<li class="yellow" onclick="setRBtn('RBtn',4)"></li>
<li class="red" onclick="setRBtn('RBtn',5)"></li>
<li class="black" onclick="setRBtn('RBtn',6)"></li>
</ul>
<!-- following is for testing purposes only -->
<div style="float:left">
<span style="float:left">Chosen: </span><div id="colorChosen"
style="width:50px; height:50px; border:solid 1px black; float:left;
margin:5px 5px; background-color:white; display:block;">
</div>
</div>
<br style="clear:both">
</body>
</html>