CSS styled checkbox not working when clicked - html

Question

Index.html
<div class="wrap">
<div class="toggle">
<input type="checkbox" onclick='window.location.assign("newuser.html")'/>
<span class="btn"></span>
<span class="texts"></span>
<span class="bg"></span>
</div>
</div>
Index.css
#import url(http://fonts.googleapis.com/css? family=Open+Sans:400,600|Lato:300,400,700&subset=latin,cyrillic);
* {
margin: 0;
padding: 0;
}
body {
background: #ecf0f1;
}
.wrap {
width: 90px;
margin: 50px auto;
}
.toggle {
position: relative;
width: 82px;
height: 35px;
border: 3px solid #f9f9f9;
border-radius: 40px;
}
.toggle input[type="checkbox"] {
opacity: 0;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 84px;
height: 34px;
}
.toggle .btn {
display: block;
position: absolute;
z-index: 4;
top: -3px;
left: -1px;
width: 37px;
height: 37px;
background: #F5F5F5;
border: 1px solid #e8e8e8;
border-radius: 100%;
box-shadow: 0 2px 4px rgba(100, 100, 100, 0.1);
transition: left .25s ease-in-out;
}
.toggle input[type="checkbox"]:checked ~ .btn {
left: 44px;
}
.toggle .texts {
position: absolute;
top: 9px;
z-index: 2;
width: 100%;
font-family: 'Lato', Helvetica, sans-serif;
font-weight: bold;
color: #fff;
text-transform: uppercase;
font-size: 14px;
}
.toggle .texts:before {
content: "On";
position: absolute;
left: 12px;
}
.toggle .texts:after {
content: "Off";
position: absolute;
right: 11px;
}
.toggle .bg {
display: block;
background: #F56557;
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 40px;
box-shadow: inset 0 0px 2px 1px rgba(0, 0, 0, 0.3);
transition: background .25s ease-in;
}
.toggle input[type="checkbox"]:checked ~ .bg {
background: #48C893;
}
I am creating an Android mobile application and I ran this code in Eclipse Luna. I managed to show the button but when it is clicked, nothing happens.

Answer 1

Your code is working. The style is changed onclick.
The problem might be somewhere else
* {
margin: 0;
padding: 0;
}
body {
background: #ecf0f1;
}
.wrap {
width: 90px;
margin: 50px auto;
}
.toggle {
position: relative;
width: 82px;
height: 35px;
border: 3px solid #f9f9f9;
border-radius: 40px;
}
.toggle input[type="checkbox"] {
opacity: 0;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 84px;
height: 34px;
}
.toggle .btn {
display: block;
position: absolute;
z-index: 4;
top: -3px;
left: -1px;
width: 37px;
height: 37px;
background: #F5F5F5;
border: 1px solid #e8e8e8;
border-radius: 100%;
box-shadow: 0 2px 4px rgba(100, 100, 100, 0.1);
transition: left .25s ease-in-out;
}
.toggle input[type="checkbox"]:checked ~ .btn {
left: 44px;
}
.toggle .texts {
position: absolute;
top: 9px;
z-index: 2;
width: 100%;
font-family: 'Lato', Helvetica, sans-serif;
font-weight: bold;
color: #fff;
text-transform: uppercase;
font-size: 14px;
}
.toggle .texts:before {
content: "On";
position: absolute;
left: 12px;
}
.toggle .texts:after {
content: "Off";
position: absolute;
right: 11px;
}
.toggle .bg {
display: block;
background: #F56557;
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 40px;
box-shadow: inset 0 0px 2px 1px rgba(0, 0, 0, 0.3);
transition: background .25s ease-in;
}
.toggle input[type="checkbox"]:checked ~ .bg {
background: #48C893;
}
<div class="wrap">
<div class="toggle">
<input type="checkbox" />
<span class="btn"></span>
<span class="texts"></span>
<span class="bg"></span>
</div>
</div>

Answer 2

Look into the below jsfiddle for your code
your onClick might be faster that your vision
your code seems working fine please check from your end