html - 单选按钮的不同亮点

Question

我试图用一些单选按钮制作一个表单，我发现了如何像按钮一样突出单选按钮。当它被选中时。但是问题的类型是是/否以及是和不需要以不同的方式突出显示。

遗憾的是，我不确定如何使用 CSS 来做到这一点。这就是我所做的:

input:checked+span {
  background-color: #0a5499;
  color: #fff;
}

<div class="col-md-12">
  <div class="col-md-6 quetionBottomPadding">

    <label class="UWlabel"><input class="hiddenRadioButton " type="radio" name="toggle"><span class="greyLabel">YES</span></label>
    <label class="UWlabel"><input class="hiddenRadioButton " type="radio" name="toggle"><span class="greyLabel">NO</span></label>

  </div>
  <div class="col-md-6">Asdadsadadadsadadadadsad</div>
</div>

遗憾的是，我对 CSS 选择器没有足够的经验，所以我不确定应该添加什么或者应该如何更改 HTML 才能使功能成为可能。

Answer 1

为您的单选按钮指定一个 ID，并在 CSS 中使用该 ID 以不同方式定位每个按钮:

#yes:checked+span {
  background-color: #0a5499;
  color: #fff;
}

#no:checked+span {
  background-color: #f00;
  color: #fff;
}

<div class="col-md-12">
  <div class="col-md-6 quetionBottomPadding">

    <label class="UWlabel"><input id="yes" class="hiddenRadioButton " type="radio" name="toggle"><span class="greyLabel">YES</span></label>
    <label class="UWlabel"><input id="no" class="hiddenRadioButton " type="radio" name="toggle"><span class="greyLabel">NO</span></label>

  </div>
  <div class="col-md-6">Asdadsadadadsadadadadsad</div>
</div>

如果您有很多是/否问题，并且您希望它们以相同的方式突出显示，那么使用类而不是 ID:

.yes:checked+span {
  background-color: #0a5499;
  color: #fff;
}

.no:checked+span {
  background-color: #f00;
  color: #fff;
}

<div class="col-md-12">
  <div class="col-md-6 quetionBottomPadding">

    <label class="UWlabel"><input class="hiddenRadioButton yes" type="radio" name="toggle"><span class="greyLabel">YES</span></label>
    <label class="UWlabel"><input class="hiddenRadioButton no" type="radio" name="toggle"><span class="greyLabel">NO</span></label>

  </div>
  <div class="col-md-6">Asdadsadadadsadadadadsad</div>
</div>