springload/segmented-control

Name: segmented-control

Owner: Springload

Description: A simple, CSS-driven way to create a segmented control using a list of radio buttons and labels.

Created: 2014-09-08 22:09:03.0

Updated: 2017-11-20 13:07:12.0

Pushed: 2014-09-09 00:00:09.0

Homepage: null

Size: 138

Language: CSS

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

segmented-control

A simple, CSS-driven way to create a segmented control using a list of radio buttons and labels.

Here?s the markup:

class="segmented-control">
<li class="segmented-control__item">
    <input class="segmented-control__input" type="radio" value="1" name="option" id="option-1" checked>
    <label class="segmented-control__label" for="option-1">Thing 1</label>
</li>
<li class="segmented-control__item">
    <input class="segmented-control__input" type="radio" value="2" name="option" id="option-2" >
    <label class="segmented-control__label" for="option-2">Thing 2</label>
</li>
>

And the CSS:

mented-control {
display: table;
width: 100%;
margin: 2em 0;
padding: 0;


mented-control__item {
display: table-cell;
margin: 0;
padding: 0;
list-style-type: none;


mented-control__input {
position: absolute;
visibility: hidden;


mented-control__label {
display: block;
margin: 0 -1px -1px 0; /* -1px margin removes double-thickness borders between items */
padding: 1em .25em;

border: 1px solid #ddd;

font: 14px/1.5 sans-serif; 
text-align: center;  

cursor: pointer;


mented-control__label:hover {
background: #fafafa;


mented-control__input:checked + .segmented-control__label {
background: #eee;
color: #333;