单选按钮故障

Question

我设置了单选按钮的样式，使其更大，但不再可点击。此代码适用于响应式平台，因此需要 CSS 样式。

决定按钮实际功能的 CSS（没有 JS）已经消失了。

谁能解释一下原因？

.container{
  display: block;
  position: relative;
  margin: 40px auto;
  height: auto;
  width: 500px;
  padding: 20px;
}

.container ul{
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}

ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #333;
}

ul li input.answer[type=radio]{
  position: absolute;
  visibility: hidden;
}

ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.35em;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}

ul li:hover label{
  color: #000;
}

ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
  z-index: 5;
  transition: border .25s linear;
  -webkit-transition: border .25s linear;
}

ul li:hover .check {
  border: 5px solid #000;
}

ul li .check::before {
  display: block;
  position: absolute;
  content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
  left: 5px;
  margin: auto;
  transition: background 0.25s linear;
  -webkit-transition: background 0.25s linear;
}

input.answer[type=radio]:checked ~ .check {
  border: 5px solid #000;
}

input.answer[type=radio]:checked ~ .check::before{
  background: #000;
}

input.answer[type=radio]:checked ~ label{
  color: #000;
}

<div class="container">  
<ul>
<li>
<input class="answer" type="radio" name="q4" value="0"><label>wrong answer</label><div class="check"></div>
</li>
<li>
<input class="answer" type="radio" name="q4" value="1"><label id="correctString4">correct answer 4</label><div class="check"></div>
</li>
<li>
<input class="answer" type="radio" name="q4" value="0"><label>wrong answer</label><div class="check"></div><div class="check"></div>
</li>
<li>
<input class="answer" type="radio" name="q4" value="0"><label>wrong answer</label><div class="check"></div>
</li>
</ul>
</div>

Answer 1

您的单选按钮基本上是不可见且不可点击的。 可见的是一个大圆圈和一个<label>，它们实际上都没有以任何方式与您的单选按钮相关联。 <label> 需要包含它所描述的元素，或者有一个 for 属性通过其 ID 指向该元素。

.container{
  display: block;
  position: relative;
  margin: 40px auto;
  height: auto;
  width: 500px;
  padding: 20px;
}

.container ul{
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}

ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #333;
}

ul li input.answer[type=radio]{
  position: absolute;
  visibility: hidden;
}

ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.35em;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}

ul li:hover label{
  color: #000;
}

ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
  z-index: 5;
  transition: border .25s linear;
  -webkit-transition: border .25s linear;
}

ul li:hover .check {
  border: 5px solid #000;
}

ul li .check::before {
  display: block;
  position: absolute;
  content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
  left: 5px;
  margin: auto;
  transition: background 0.25s linear;
  -webkit-transition: background 0.25s linear;
}

input.answer[type=radio]:checked ~ .check {
  border: 5px solid #000;
}

input.answer[type=radio]:checked ~ .check::before{
  background: #000;
}

input.answer[type=radio]:checked ~ label{
  color: #000;
}

<div class="container">  
  <ul>
    <li>
      <input id="answer1" class="answer" type="radio" name="q4" value="0">
      <label for="answer1">wrong answer</label><div class="check"></div>
    </li>
    <li>
      <input id="answer2" class="answer" type="radio" name="q4" value="1">
      <label for="answer2" id="correctString4">correct answer 4</label><div class="check"></div>
    </li>
  </ul>
</div>

注意在输入中添加了一个 ID，并在标签上添加了一个匹配的 for。 CSS 没有改变。