https://github.com/springload/segmented-control
A simple, CSS-driven way to create a segmented control using a list of radio buttons and labels.
https://github.com/springload/segmented-control
css radio-buttons
Last synced: 7 months ago
JSON representation
A simple, CSS-driven way to create a segmented control using a list of radio buttons and labels.
- Host: GitHub
- URL: https://github.com/springload/segmented-control
- Owner: springload
- Created: 2014-09-08T22:09:03.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2014-09-09T00:00:09.000Z (over 11 years ago)
- Last Synced: 2024-04-16T06:38:43.833Z (almost 2 years ago)
- Topics: css, radio-buttons
- Language: CSS
- Size: 135 KB
- Stars: 16
- Watchers: 36
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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:
```html
-
Thing 1
-
Thing 2
```
And the CSS:
```css
.segmented-control {
display: table;
width: 100%;
margin: 2em 0;
padding: 0;
}
.segmented-control__item {
display: table-cell;
margin: 0;
padding: 0;
list-style-type: none;
}
.segmented-control__input {
position: absolute;
visibility: hidden;
}
.segmented-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;
}
.segmented-control__label:hover {
background: #fafafa;
}
.segmented-control__input:checked + .segmented-control__label {
background: #eee;
color: #333;
}
```