- Dec 18, 2010
- 2,638
- 2,393
Not coded in a while and tried to do something similar to the toggle buttons on iOS, got far enough then got bored.
There's no parent element selector in CSS and I can't be bothered to use JavaScript to make the background colour of the onofftoggle element change to green when checked.
Anyway, you can view the preview here:
And code is below:
Hope it helps if you go with it,
Mark.
There's no parent element selector in CSS and I can't be bothered to use JavaScript to make the background colour of the onofftoggle element change to green when checked.
Anyway, you can view the preview here:
You must be registered for see links
And code is below:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body { padding: 60px; }
.onofftoggle {
width: 80px;
border: 1px solid #ccc;
border-radius: 25px;
height: 25px;
position: relative;
background-color: #f7f7f7;
}
.onofftoggle input[type="checkbox"] {
display: none;
}
.onofftoggle input[type="checkbox"] + .onoffbutton {
display: block;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 25px;
width: 25px;
height: 90%;
max-height: 23px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
cursor: pointer;
position: absolute;
left: 0;
-webkit-transition: left .4s ease-in-out;
transition: left .4s ease-in-out;
}
.onofftoggle input[type="checkbox"]:checked + .onoffbutton {
left: calc(100% - 25px);
}
</style>
</head>
<body>
<div class="onofftoggle">
<label>
<input type="checkbox" name="check1" />
<span class="onoffbutton"></span>
</label>
</div>
<div class="onofftoggle">
<label>
<input type="checkbox" name="check2" />
<span class="onoffbutton"></span>
</label>
</div>
<div class="onofftoggle">
<label>
<input type="checkbox" name="check3" />
<span class="onoffbutton"></span>
</label>
</div>
</body>
</html>Hope it helps if you go with it,
Mark.
