CSS样式的复选框在单击时不起作用答案

【问题标题】：CSS styled checkbox not working when clickedCSS样式的复选框在单击时不起作用
【发布时间】：2016-11-02 18:01:55
【问题描述】：

索引.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 中运行此代码。我设法显示了按钮，但是当它被点击时，什么也没有发生。

【问题讨论】：

您的代码有效吗？问题出在哪里？

标签： html css eclipse button checkbox

【解决方案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>

【讨论】：

【解决方案2】：

查看下面的jsfiddle 以获取您的代码

您的onClick 可能比您的视觉更快

您的代码似乎运行良好，请检查您的端

【讨论】：

是的，onclick 功能确实有效。但是，单击后，复选框不会滑动。我在jsfiddle中复制了css。错误是由于 onclick 功能阻碍了动画的处理，还是在编码的其他地方有错误？