时间戳

首页 > 解决方案 > 在我下面的代码片段中，我试图检查液体的输入单选按钮，但在咬可以时无法检查？

css - 在我下面的代码片段中，我试图检查液体的输入单选按钮，但在咬可以时无法检查？

问题描述

在我下面的代码片段中，我试图检查下一组中的单选按钮，但它不是选择性的，无法检查这里是代码：

input[type="radio"] {
  display: none;
}

input[type="radio"]+label span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: transparent;
  vertical-align: middle;
  border: 2px solid #f56;
  border-radius: 50%;
  padding: 2px;
  margin: 0 5px;
}

input[type="radio"]:checked+label span {
  width: 10px;
  height: 10px;
  background: #f56;
  background-clip: content-box;
}
<div>
  <input type="radio" id="pizza" name="bites" value="pizza">
  <label for="male"><span></span>pizza</label><br>
  <input type="radio" id="cake" name="bites" value="cake">
  <label for="female"><span></span>cake</label><br>
</div>
<div>
  <input type="radio" id="soda" name="liquid" value="soda">
  <label for="male"><span></span>soda</label><br>
  <input type="radio" id="water" name="liquid" value="water">
  <label for="water"><span></span>water</label><br>
</div>

标签： css

解决方案

标签上的您for与无线电输入 id 不匹配，这就是您的代码不起作用的原因

input[type="radio"] {
  display: none;
}

input[type="radio"]+label span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: transparent;
  vertical-align: middle;
  border: 2px solid #f56;
  border-radius: 50%;
  padding: 2px;
  margin: 0 5px;
}

input[type="radio"]:checked+label span {
  width: 10px;
  height: 10px;
  background: #f56;
  background-clip: content-box;
}
<div>
  <input type="radio" id="pizza" name="bites" value="pizza">
  <label for="pizza"><span></span>pizza</label><br>
  <input type="radio" id="cake" name="bites" value="cake">
  <label for="cake"><span></span>cake</label><br>
</div>
<div>
  <input type="radio" id="soda" name="liquid" value="soda">
  <label for="soda"><span></span>soda</label><br>
  <input type="radio" id="water" name="liquid" value="water">
  <label for="water"><span></span>water</label><br>
</div>

推荐阅读