pablocattaneo
11/21/2016 - 2:47 PM

Custom radio buttons form.

Custom radio buttons form.

custom_radio_button.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css" media="screen">
		body{
			width:500px;
			margin: auto;
			overflow: hidden;
		}
		label{
			display: block;
			overflow: hidden;			
		}
		input{
			margin-left: -30px;
			opacity: 0;
			position: absolute;
		}

		input:checked + p{
			background-image: url(http://placehold.it/20x20/00ff00);
		}

		p{
			background-image: url(http://placehold.it/20x20/ff0000);
			background-position: left center;
			background-repeat: no-repeat;
			padding-left: 30px
		}
		
	</style>
</head>
<body>
<label><input type="radio" name="alexis" value=""><p>alexis</p></label>
<label><input type="radio" name="roldan" value=""><p>roldan</p></label>

</body>
</html>