如何解决使用 css 定制的无线电输入问题？

Question

我正在做一个输入收音机，它是根据我逐步了解的所有内容定制的。当我单击 older/standard 单选输入（尚未隐藏它们）时一切正常，我单击旧的单选按钮并选中新的自定义相应按钮。但是当我点击新定制的单选按钮时，它们并没有像预期的那样工作。

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

.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 属性正在寻找 ID 名为 chk 的输入，因为您已经获得了所有三个具有相同 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>

如何解决使用 css 定制的无线电输入问题？

how to fix a problem with radio input costumized with css?

css

input

radio