单选按钮的不同亮点答案

【问题标题】：Different highlights for radio buttons单选按钮的不同亮点
【发布时间】：2018-07-23 22:45:36
【问题描述】：

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

遗憾的是，我不确定如何使用 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 以使功能成为可能。

【问题讨论】：

我试图以一种方式突出显示单选按钮。而单选按钮是另一种方式。当点击当然
使用 jQuery 的简单解决方案。你想让我试一试吗？

标签： html css input radio-button

【解决方案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>

【讨论】：

我试图突出显示跨度。我认为这从 CSS 中很明显。抱歉造成混乱。
是的。那是我的错，我需要更加清晰和具体。但是@RacilHilan 给出的答案很好。