如何解决使用 CSS 自定义无线电输入的问题？

Question

我正在使用我逐步了解的所有内容定制输入收音机。 当我单击旧/标准单选输入（尚未隐藏它们）时，一切都很好，我单击旧单选按钮并检查新的自定义相应按钮。 但是，当我单击新自定义的单选按钮时，它们无法正常工作。

问题是当我点击第二个和第三个自定义收音机时，它会自动检查第一个。 我真的需要你的帮助，因为我不知道我在哪里失败了。我已经从互联网上的示例代码中查看过，这正是我所做的，所以我真的不明白我应该纠正的问题在哪里。

.content {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.items {
  display: flex;
}

label {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

.radio__span {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 3px solid #049372;
  margin-right: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio:checked+.radio__span::before {
  content: "";
  display: block;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background-color: #049372;
}


/* .radio{
    width:0;
    height:0;
    opacity:0;
    visibility:hidden;
} */

<div class="content">
  <div class="items">
    <label for="chk">
                <input type="radio" name="dev" class="radio" id="chk">
                <span class="radio__span"></span>
                <p>Frontend</p>
            </label>
    <label for="chk">
                <input type="radio" name="dev" class="radio" id="chk">
                <span class="radio__span"></span>
                <p> Backend</p>
            </label>
    <label for="chk">
                <input type="radio" name="dev" class="radio" id="chk">
                <span class="radio__span"></span>
                <p>Fullstack</p>
            </label>
  </div>
</div>

我希望点击新的单选按钮并被选中。

Answer 1

ID必须是唯一的。修复后，您需要更新标签元素以指向新的 ID。修复它，它就可以正常工作了。

.content {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.items {
  display: flex;
}

label {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

.radio__span {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 3px solid #049372;
  margin-right: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio:checked+.radio__span::before {
  content: "";
  display: block;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background-color: #049372;
}


/* .radio{
    width:0;
    height:0;
    opacity:0;
    visibility:hidden;
} */

<div class="content">
  <div class="items">
    <label for="chk1">
                <input type="radio" name="dev" class="radio" id="chk1">
                <span class="radio__span"></span>
                <p>Frontend</p>
            </label>
    <label for="chk2">
                <input type="radio" name="dev" class="radio" id="chk2">
                <span class="radio__span"></span>
                <p> Backend</p>
            </label>
    <label for="chk3">
                <input type="radio" name="dev" class="radio" id="chk3">
                <span class="radio__span"></span>
                <p>Fullstack</p>
            </label>
  </div>
</div>

Answer 2

发生这种情况是因为您的 for 属性正在寻找具有名为 chk 的 Id 的输入，因为您拥有具有相同 ID 的所有三个复选框，它正在检查第一个...

以下方法可行：

.content {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.items {
  display: flex;
}

label {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

.radio__span {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 3px solid #049372;
  margin-right: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio:checked+.radio__span::before {
  content: "";
  display: block;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background-color: #049372;
}

<div class="content">
  <div class="items">
    <label for="chk">
                <input type="radio" name="dev" class="radio" id="chk">
                <span class="radio__span"></span>
                <p>Frontend</p>
            </label>
    <label for="chk1">
                <input type="radio" name="dev" class="radio" id="chk1">
                <span class="radio__span"></span>
                <p> Backend</p>
            </label>
    <label for="chk2">
                <input type="radio" name="dev" class="radio" id="chk2">
                <span class="radio__span"></span>
                <p>Fullstack</p>
            </label>
  </div>
</div>