html - CSS Toggle 单选开关自定义

Question

我发现这个 CSS Radio Toggle 我认为它适用于我们网站的一部分，我将如何个性化它以便打开是绿色，关闭是红色？

提琴手

我试过改变一些css，但似乎无法得到这是我需要制作两个单独的类的位吗？

#bounds input:checked + span {
background-color:#404040;
color:#F7F7F7;
border-radius:3px;
}

欢迎提出想法和例子谢谢:)

Answer 1

这是一个小提琴：http: //jsfiddle.net/RkvAP/1304/

<div id="bounds">
    <label class="on"><input type="radio" name="toggle"><span>On</span></label>
    <label class="off"><input type="radio" name="toggle"><span>Off</span></label>
</div>

#bounds label.on input:checked + span {
    background: green;
    colr: #f7f7f7;
}

#bounds label.off input:checked + span {
    background: red;
    color: #f7f7f7;
}

Answer 2

我建议，如果您只想在检查background-color相关收音机时更改input：

#bounds input:checked + span {
    color:#F7F7F7;
}
#bounds label:first-child input:checked + span {
    background-color:#060;
}
#bounds label:first-child + label input:checked + span {
    background-color:#600;
}

JS小提琴。

虽然这种方法取决于标记中元素的顺序，但它不需要添加任何其他属性。

Answer 3

或者可能是这样..

<style>

#bounds input:checked + span.on {
    background-color: #0C0;
    color:#F7F7F7;
}
#bounds input:checked + span.off {
    background-color: #F00;
    color:#F7F7F7;
}

</style>

<div id="bounds">
    <label><input type="radio" name="toggle"><span class="on">On</span></label>
    <label><input type="radio" name="toggle"><span class="off">Off</span></label>
    </div>