Springload/segmented-control: A Simple, CSS-driven Way To ... - GitHub

Skip to content Dismiss alert {{ message }} This repository was archived by the owner on Apr 14, 2025. It is now read-only. springload / segmented-control Public archive

• Notifications You must be signed in to change notification settings
• Fork 1
• Star 16

• Code
• Issues 1
• Pull requests
• Actions
• Projects
• Wiki
• Security
• Insights

Additional navigation options

 masterBranchesTagsGo to fileCodeOpen more actions menu

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit   History 12 Commits12 Commits
README.md		README.md
index.html		index.html
segmented-control.css		segmented-control.css
View all files

Repository files navigation

• 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:

<ul 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> </ul>

And the 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; }

About

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

Topics

css radio-buttons

Resources

Readme

Uh oh!

There was an error while loading. Please reload this page.

Activity Custom properties

Stars

16 stars

Watchers

32 watching

Forks

1 fork Report repository

Releases

No releases published

Packages

Uh oh!

There was an error while loading. Please reload this page.

Contributors

Uh oh!

There was an error while loading. Please reload this page.

Languages

• CSS 100.0%

You can’t perform that action at this time.