如何设置所选单选按钮的样式

时间:2016-12-16 12:28:21

标签: html css

我的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/

1 个答案:

答案 0 :(得分:2)

CSS规则是

input[type="radio"]:checked

不确定你想要做什么,但是如果你打算在你的问题中的每个无线电元素后面的元素上做一些样式,你将使用以下规则

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