css - 如何解决使用 css 自定义 radio 输入的问题？

Question

我正在做一个输入 radio ，它是根据我逐步了解的所有内容定制的。当我点击旧的/标准的 radio 输入(还没有隐藏它们)时一切正常，我点击旧的单选按钮并检查新的自定义相应的。但是当我点击新定制的单选按钮时，它们并没有按预期工作。

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

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