html - 单击时 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>

索引.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>