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以不同的方式定位每个按钮：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

单选按钮的不同亮点

1 个答案: