Radio group

Design of a pretty radio group

by roge roge

HTML

<div class='Radio-group' title='Select Mp3 for audio, and Mp4 for video'> 
	<input type="radio" id="offId" name="OnOffgroup" value="off" checked/>
	<label class='Radio' for="offId"> Off </label> 
	<input type="radio" id="onId" name="OnOffgroup" value="on"/>
	<label class='Radio' for="onId"> On </label> 
	<input type="radio" id="xId" name="OnOffgroup" value="X"/>
	<label class='Radio' for="xId"> X? </label> 
</div>

CSS

.Radio-group {
	border: solid 2px #969696;
	background-color: #969696;
	display: inline-block;
	border-radius: 12px;
	overflow: hidden;
	font-family: monospace, sans-serif;
	font-size: 1em;
}

LABEL.Radio {
	color: #6d6d6d;
	display: inline-block;
	font-weight: bold;
	cursor: pointer;
	padding: 2px 6px;
}

/* Dont show standard radio circle */
input[type=radio] {
	position: absolute;
	visibility: hidden;
	display: none;
}

input[type=radio]:checked + LABEL.Radio {
	color: #eee;
	background: #777;
	padding: 2px 12px;
}