HTML 正在检查同级单选按钮是否已选中

Question

所以我有这个任务，我需要制作一个自定义单选按钮，如果选中该按钮，则会出现一个成功徽标。

我成功创建了框但没有创建内容我首先虽然它的真实单选按钮不起作用但在我调高不透明度之后（我使用不透明度隐藏真实的以防这不够清楚）真正的单选按钮工作。我试着问我的前辈他没有真正回答我的问题

这是 html

<label for="Viridian">      
    <span class="checkbox"></span>
     Viridian
    <input type="radio" id="Viridian" name="color" value="Viridian" checked="checked">
</label>

这是 css

.checkbox {
    display: block;
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-right: 2vh;
    border: solid 1px white;
}
    input ~ .checkbox::after {
    content: '';
    vertical-align: middle;
    font-size: 15px;
    text-align: center;
}
 input:checked ~ .checkbox::after {
    content: 'a';
}

Answer 1

我想这就是您要找的。

HTML:

 <p>
    <input type="radio" id="test3" name="radio-group">
    <label for="test3">Orange</label>
 </p>

CSS:

[type="radio"]: checked,
[type="radio"]: not(: checked) {
  position: absolute;
  left: -9999px;
}

[type="radio"]: checked+label,
[type="radio"]: not(: checked)+label {
  position: relative;
  padding - left: 28px;
  cursor: pointer;
  line - height: 20px;
  display: inline - block;
  color: #666;
}

[type="radio"]: checked+label: before,
[type="radio"]: not(: checked)+label: before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #ddd;
  border - radius: 100 %;
  background: #fff;
}

[type="radio"]: checked+label: after,
[type="radio"]: not(: checked)+label: after {
  content: '';
  width: 12px;
  height: 12px;
  background: #F87DA9;
  position: absolute;
  top: 4px;
  left: 4px;
  border - radius: 100 %;
  -webkit - transition: all 0.2s ease;
  transition: all 0.2s ease;
}

[type="radio"]: not(: checked)+label: after {
  opacity: 0;
  -webkit - transform: scale(0);
  transform: scale(0);
}

[type="radio"]: checked+label: after {
  opacity: 1;
  -webkit - transform: scale(1);
  transform: scale(1);
}

HTML 正在检查同级单选按钮是否已选中

HTML Checking sibling radio button is checked

html

css

radio-button