<div class="grid-container">
<form>
<h3>Radio Button Group with Foundation 6 for sites</h3>
<p>You can only select one item</p>
<div class="button-group round toggle">
<input type="radio" id="r1" name="r-group">
<label class="button" for="r1">Left</label>
<input type="radio" id="r2" name="r-group">
<label class="button" for="r2">Middle</label>
<input type="radio" id="r3" name="r-group">
<label class="button" for="r3">Right</label>
</div>
<h3>Checkbox Button Group with Foundation 6 for sites</h3>
<p>You can select multiple items at once</p>
<div class="button-group">
<input id="checkbox1" type="checkbox">
<label class="button" for="checkbox1">Left</label>
<input id="checkbox2" type="checkbox">
<label class="button" for="checkbox2">Middle</label>
<input id="checkbox3" type="checkbox">
<label class="button" for="checkbox3">Right</label>
</div>
</form>
</div>
body{
text-align: center
}
$selected-color: salmon;
.button-group input{
display: none;
}
.button-group input:checked + label,
.button-group input:checked + label:active {
background-color: $selected-color;
}
View Compiled
This Pen doesn't use any external JavaScript resources.