CSS - Styled Radio Buttons

This styling will work with the HTML produced by new form editor.

by Ben Clayton

HTML

<div>
<input type=radio name="sex" id="sex-1" />
<label for="sex-1">Male</label>
</div>
<div>
<input type=radio name="sex" id="sex-2" />
<label for="sex-2">Female</label>
</div>

CSS

div {
	display: inline-block;
}

input {
	display: none;
}

label {
	font-size: 24px;
	padding-right: 30px;
}

label::after {
	position: relative;
	top: 18px;
	font-size: 62px;
	width: 40px;
	height: 60px;
	display: inline-block;
	content: "?";
	padding: 3px 18px;
	margin-left: 20px;
	border: 2px solid red;
	border-radius: 50%;
	background-color: gray;
	color: gray;
}

input:checked ~ label::after {
	content: "Y";
	color: white;
}