单选按钮CSS不会显示它们已被单击

Question

所以我一直在搞弄一些自定义单选按钮，目前有这个：

input[type="radio"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
#trueFalse {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  padding-left: 30px;
  padding-right: 10px;
  line-height: 36px;
  cursor: pointer;
}
#trueFalse::before {
  content: " ";
  position: absolute;
  top: 6px;
  left: 0;
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid #8e44ad;
  border-radius: 4px;
  z-index: -1;
}
input[type="radio"] + #trueFalse::before {
  border-radius: 18px;
}
input[type="radio"]:checked + #trueFalse {
  padding-left: 10px;
  color: #fff;
}
input[type="radio"]:checked + #trueFalse::before {
  top: 0;
  width: 100%;
  height: 100%;
  background: #8e44ad;
}

<p id="vanished">
 <label id="trueFalse">True
  <input type="radio" id="vanished">
  <span class="radioMark"></span>
 </label>
 <label id="trueFalse">False
  <input type="radio" id="vanished">
  <span class="radioMark"></span>
 </label>
</p>

，尽管页面上显示了2个收音机，但是单击它们中的任何一个并不表明它们已被单击，只是看起来完全一样。 有人可以帮忙吗？