CSS в стиле флажок не работает при нажатии

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

Я создаю Android мобильных приложений, и я побежал этот код в Eclipse, Luna. Мне удалось показать кнопку, но когда она нажата, ничего не происходит.

Answer 1

Ваш код работает. Стиль изменен onclick.

Проблема может быть где-то еще

* { 
 
    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

Посмотрите на ниже jsfiddle для кода

ваш onClick может быть быстрее, что ваше видение

ваш код кажется работая нормально, пожалуйста, проверьте с вашего конца