GyanCode: Radio button css

Thursday, 15 September 2016

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>awesome bootstrap checkbox demo</title>
	<link rel="stylesheet" href="bootstrap.css"/>
	<link rel="stylesheet" href="../bower_components/Font-Awesome/css/font-awesome.css"/>
	<style> .radio label {display: inline-block;position: relative; padding-left: 5px; } .radio label::before {content: "";position: absolute; width: 17px;height: 17px;left: 0; margin-left: -20px;border: 1px solid #cccccc; border-radius: 50%; background-color: #fff;} .radio label::after {display: inline-block; position: absolute; content: " "; width: 11px; height: 11px; left: 3px; top: 3px; margin-left: -20px; border-radius: 50%; background-color: #009C71; -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); } .radio input[type="radio"] { opacity: 0; z-index: 1; } .radio input[type="radio"]:checked + label::after { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } .radio.radio-inline { margin-top: 0; }	</style>
	</head>
	<body>


	<div class="radio radio-info radio-inline">
	<input type="radio" id="test" value="option1" name="radioInline" checked>
	<label for="test"> Checked </label>
	</div>
	<div class="radio radio-inline">
	<input type="radio" id="test2" value="option2" name="radioInline">
	<label for="test2"> Test </label>
	</div>
	</body>
	</html>

Gyancode