Tappable radio buttons

by jorgeluis

HTML

<div class="radioset">
	
	<label class="label--radio label--radio--inline">
		<input type="radio" name="opt" id="val1" value="1">
		<span>Option1</span>
	</label>
	
	<label class="label--radio label--radio--inline">
		<input type="radio" name="opt" id="val2" value="2">
		<span>Option2</span>
	</label>
	
	<label class="label--radio label--radio--inline">
		<input type="radio" name="opt" id="val3" value="3">
		<span>Option3</span>
	</label>
	
</div>
        
<p>This is a demo for displaying regular radio buttons with button-like states and touch-screen ready tap-targets (40px here). The html includes only an extra span, and requires that the radio input be wrapped by it's label.</p>

        <p>This can be taken a lot further by styling the input itself but that's up to the designer. </p>
        
        <p>It uses a next sibling selector for the selected state, which is not supported in IE7 or earlier.</p>

CSS

.label--radio,.label--checkbox {
    position: relative;
    padding: 0;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    border-radius: 3px;
}

.label--radio span,.label--checkbox span {
    display: inline-block;
    line-height: 40px;
    padding: 0 2rem;
    border-radius: 3px;
    min-height: 40px;
    line-height: 40px;
    background-color: #f2f2f2;
    color: #555;
}

.label--radio span:hover,.label--checkbox span:hover {
    background-color: #d9d9d9;
}

/* hide the 
.label--radio input[type="radio"],
.label--checkbox input[type="checkbox"] {
    position: absolute;
    font-size: 0;
    opacity: 0;
}

.label--radio input[type="radio"]:checked+span,
.label--checkbox input[type="checkbox"]:checked+span {
    background-color: #d9d9d9;
    color: #222;
}


/* these rules are just for inlining */
.label--radio--inline,.label--checkbox--inline {
    display: inline-block;
}

.label--radio--inline+.label--radio--inline,.label--checkbox--inline+.label--checkbox--inline {
    margin-left: 0.66667rem;
}