<!--[if lte IE 8]><form name="form1" class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--><form name="form1"><!--<![endif]-->
<h1>Select colour:</h1>		
<div class="check-colours">
				<div>
						<input  class="check-colour" type="radio" name="colours" id="yellow" value="yellow">
						<label class="check-colour yellow" for="yellow"><span>yellow</span></label>
				</div>
				<div>
						<input  class="check-colour " type="radio" name="colours" id="blue" value="blue">
						<label class="check-colour blue"  for="blue"><span>blue</span></label>
				</div>
				<div>
						<input  class="check-colour " type="radio" name="colours" id="green" value="green">
						<label class="check-colour green"  for="green"><span>green</span></label>
				</div>
		</div>
</form>
<p>The above is styled via checkboxes and without css looks like below</p>
<form name="form2">
		<div>
				<div>
						<input  type="radio" name="colours2" id="yellow2" value="yellow2">
						<label for="yellow2"><span>yellow</span></label>
				</div>
				<div>
						<input type="radio" name="colours2" id="blue2" value="blue2">
						<label for="blue2"><span>blue</span></label>
				</div>
				<div>
						<input type="radio" name="colours2" id="green2" value="green2">
						<label for="green2"><span>green</span></label>
				</div>
		</div>
</form>

form,p{clear:both;}
.check-colours {
	overflow:hidden;
	position:relative;
	padding:5px;
	border:1px solid #000;
	float:left;
}
input.check-colour, label.check-colour span {
	position:absolute;
	left:-999em;
}
label.check-colour {
	width:25px;
	height:25px;
	float:left;
	cursor:pointer;
}
.yellow {
	background:yellow
}
.blue {
	background:blue
}
.green {
	background:green
}
.check-colours label:hover{
  outline:3px solid silver;
  box-shadow:0 0 10px rgba(0,0,0,0.4);
  position:relative;
  overflow:hidden;
}
input.check-colour:checked + label {
	outline:3px solid silver;
	position:relative;
  overflow:hidden;
  z-index:4;
}
.check-colours div{float:left}

/* ie8 styling */
.ie8 .check-colours div{position:relative;}
.ie8 input.check-colour {
	position:absolute;
	left:3px;
	top:3px;
	z-index:3;
}