Question

我设置了单选按钮，因此它们更大，但它们不再可点击。此代码适用于响应平台，因此需要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指向元素。

＆＃13;

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

＆＃13;

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

＆＃13;

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

单选按钮故障

1 个答案: