Styling Radio buttons with CSS only (no images)

Styling Radio buttons with CSS Only (no images), using the :checked pseudo selector

by prince bazawule

HTML

<p>
  Which is your favourite dance genre?
</p>
<span class="radio_group">
	<input type="radio" id="dubstep" name="my_radio" value="dubstep">
	<label for="dubstep"><span>dubstep</span></label><br>
	<input type="radio" id="electro" name="my_radio" value="electro">
	<label for="electro"><span>electro</span></label><br>
	<input type="radio" id="jungle" name="my_radio" value="jungle">
	<label for="jungle"><span>jungle</span></label>
</span>

SCSS

// variables

// colors
$white: rgba(254, 255, 250, 1);
$grey: rgba(220, 231, 235, 1);
$lightgrey: rgba(238, 241, 243, 1);
$darkgrey: rgba(192, 200, 208, 1);
$blue: rgba(34, 190, 198, 1);
$black: rgba(48, 69, 92, 0.8);

// fonts
$sans: 'Ubuntu', sans-serif;
$heading: 'Source Sans Pro', sans-serif;

// document styles
body {
	position: relative;
	width: 90%;
	height: 100%;
	background: $lightgrey;
	font-family: $sans;
	font-weight: 300;
	color: $black;
	margin: 5% auto;
	
	p {
		margin-bottom: 1em;
	}
}

// radio group
.radio_group {
	position: relative;
	padding: 0;
	
	// hide radio input
	input[type="radio"] {
		display: none;
		
		// style span within the label
		& + label span { 
			position: relative;
			display: inline-block;
			vertical-align: middle;
			cursor: pointer;
			margin-bottom: 0.5em;
			line-height: 1.2;
			clear: both;
			padding-left: 1.8em;
			
			&:before {
				position: absolute;
				content: "";
				border: 6px solid $darkgrey;
				background: $darkgrey;
				border-radius: 50%;
				width: 8px;
				height: 8px;
				left: 0;
				margin-top: -2px;
			}
		}
		
		// style :checked input span
		&:checked + label span {
			&:before {
				border: 6px solid $blue;
				background: $white;
			}
		}
	}
}