CSSPortal Playground Examples

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
	input[type=radio], input[type=checkbox] {
	    display:none;
	}
	input[type=radio] + label:before {
	    content: "";  
	    display: inline-block;  
	    width: 15px;  
	    height: 15px;  
	    vertical-align:middle;
	    margin-right: 8px;  
	    background-color: #aaa;  
	    box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .3);
	    border-radius: 8px;  
	}
	input[type=checkbox] + label:before {
	    content: "";  
	    display: inline-block;  
	    width: 15px;  
	    height: 15px;  
	    vertical-align:middle;
	    margin-right: 8px;  
	    background-color: #aaa;  
	    box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .3);
	    border-radius: 4px;  
	}
	input[type=radio]:checked + label:before {
		content: "\2022";
		color:white;
	    background-color: #666; 
		font-size:1.8em;
		text-align:center;
		line-height:14px;
		text-shadow:0px 0px 3px #eee;
	}
	input[type=checkbox]:checked + label:before {
		content:"\2714";
		color:white;
	    background-color: #666; 
		text-align:center;
		line-height:15px;
	    text-shadow:0px 0px 3px #eee;
	}
    </style>
  </head>
  <body>
    <h1>Style Radio Buttons / Checkboxes</h1>
	<input type="radio" id="rb1" name="rb" value="" checked>
	<label for="rb1">Australia</label><br>
	<input type="radio" id="rb2" name="rb"value="">
	<label for="rb2">England</label><br>
	<input type="radio" id="rb3" name="rb" value="">
	<label for="rb3">United States</label> <br><br>
	<input type="checkbox" id="cb1" name="cb" value="">
	<label for="cb1">Australia</label><br>
	<input type="checkbox" id="cb2" name="cb"value="" checked>
	<label for="cb2">England</label><br>
	<input type="checkbox" id="cb3" name="cb" value="">
	<label for="cb3">United States</label> 
  </body>
</html>