如何为选定的单选按钮设置样式[重复]

Question

我的 HTML 是这样的

    <div class="col-md-12 money-radio-container">
  <input type="radio" name="optradio" class="money-radio" value="10">10 <span>$</span>
  <input type="radio" name="optradio" class="money-radio" value="20">20 <span>$</span>
  <input type="radio" name="optradio" class="money-radio" value="50">50 <span>$</span>
</div>

现在我想给选中的单选按钮赋予红色。如何通过 CSS 实现这一点？

注意：您可能已经注意到，当我单击每个单选按钮时，不会发生 html 更改。所以我不知道如何识别选定的一个。 小提琴：https://jsfiddle.net/rrmzvkag/3/

Answer 1

CSS 规则是

input[type="radio"]:checked

不确定您到底想做什么，但如果您打算对问题中每个单选元素之后的元素进行一些样式设置，则可以使用以下规则

input[type="radio"]:checked + span