CUSTOM RADIO BUTTON

Run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
	/* The container */
	.container {
	  display: block;
	  position: relative;
	  padding-left: 30px;
	  margin-bottom: 16px;
	  cursor: pointer;
	  font-size: 20px;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	}

	/* Hide the browser's default radio button */
	.container input {
	  position: absolute;
	  opacity: 0;
	  cursor: pointer;
	}

	/* Create a custom radio button */
	.radio {
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 25px;
	  width: 25px;
	  background-color: #eeeeee;
	  border-radius: 50%;
	}

	/* On mouse-over, add a grey background color */
	.container:hover input ~ .radio {
	  background-color: #cccccc;
	}

	/* When the radio button is checked, add a blue background */
	.container input:checked ~ .radio {
	  background-color: #234565;
	}

	/* Create the indicator (the dot/circle - hidden when not checked) */
	.radio:after {
	  content: "";
	  position: absolute;
	  display: none;
	}

	/* Show the indicator (dot/circle) when checked */
	.container input:checked ~ .checkmark:after {
	  display: block;
	}

	/* Style the indicator (dot/circle) */
	.container .radio:after {
		top: 9px;
		left: 9px;
		width: 10px;
		height: 8px;
		border-radius: 50%;
		background: white;
	}

</style>
</head>
<body>
    
	<h1>Custom Radio Buttons</h1>
	<label class="container">One
	  <input type="radio" checked="checked" name="radio">
	  <span class="radio"></span>
	</label>
	<label class="container">Two
	  <input type="radio" name="radio">
	  <span class="radio"></span>
	</label>
	<label class="container">Three
	  <input type="radio" name="radio">
	  <span class="radio"></span>
	</label>
	<label class="container">Four
	  <input type="radio" name="radio">
	  <span class="radio"></span>
	</label>

		
</body>
</html>