html5 checkbox toggle button

2 min read Original article ↗

@max-mapper

  • Save max-mapper/4263464 to your computer and use it in GitHub Desktop.
Save max-mapper/4263464 to your computer and use it in GitHub Desktop.

html5 checkbox toggle button

This demo overrides the default webkit-provided checkbox style by turning it off and making it transparent. Then it stretches the checkbox over the top of a custom designed button and uses a general sibling selector (~) to modify the style of the custom button whenever the checkbox toggles.

The benefit of this approach is that is is still semantically correct so it will serialize normally inside of a form, etc.

I also link to a stylesheet from my app gather.at that provides sprite images for the image assets in both 1x and 2x (retina) resolutions.

disclaimer: I have only tested this on webkit browsers (android 2.x+, ios 4.x+)

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://gather.at/home/stylesheets/sprite.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div style="width: 200px; margin: 10px; padding: 10px; border: 1px solid gray;">
<div class="share-wrapper">
<input class="share-option" name="twitter" type="checkbox">
<div class="twitter share-container first">
<span class="sprite-twitter-on"></span>
<span class="button-label">share</span>
<div class="sprite-toggle-off toggler"></div>
</div>
</div>
</div>
<div style="width: 320px; margin: 10px; padding: 10px; border: 1px solid gray;">
<div class="share-wrapper">
<input class="share-option" name="twitter" type="checkbox">
<div class="twitter share-container first">
<span class="sprite-twitter-on"></span>
<span class="button-label">share</span>
<div class="sprite-toggle-off toggler"></div>
</div>
</div>
</div>
<div style="width: 640px; margin: 10px; padding: 10px; border: 1px solid gray;">
<div class="share-wrapper">
<input class="share-option" name="twitter" type="checkbox">
<div class="twitter share-container first">
<span class="sprite-twitter-on"></span>
<span class="button-label">share</span>
<div class="sprite-toggle-off toggler"></div>
</div>
</div>
</div>
</body>
.share-container:active, .share-option[type='checkbox']:active ~ div { background-color: #fffbcd; }
.share-container {
font-size: 11.32px;
text-transform: uppercase;
height: 38px;
background-color: white;
border: 1px solid #c2c2c2;
border-radius: 3px;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
display: box;
box-pack: center;
box-align: center;
}
.share-container span { display: block; }
.share-wrapper { position: relative; }
.share-option {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.button-label {
font-size: 11.32px;
letter-spacing: -.5px;
color: #636363;
line-height: 38px;
padding: 0 0 0 12px;
margin: 0 10px 0 0;
font-weight: bold;
font-family: "Open Sans", "Helvetica Neue", Helvetica, arial, sans-serif;
}
input[type="checkbox"] {
-webkit-appearance: none;
border: 0;
width: 100%;
height: 100%;
background-color: transparent;
}
input[type="checkbox"]:checked~div div { background-position: -2px -504px; } /* <- sprite-toggle-on */