CSS Toggle 单选开关自定义答案

【问题标题】：CSS Toggle Radio Switch CustomisationCSS Toggle 单选开关自定义
【发布时间】：2013-02-11 10:30:43
【问题描述】：

我发现了这个 CSS Radio Toggle，我认为它适用于我们网站的某个部分，我将如何对其进行个性化设置，以便打开为绿色，关闭为红色？

我已尝试更改一些 css，但似乎无法理解这是我需要制作两个单独的类的位吗？

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

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

【问题讨论】：

只需更改两个语句的背景颜色。您的代码示例用于检查状态。只是#bounds 将更改未经检查的语句

标签： html css forms radio-button switch-statement

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

【讨论】：

【解决方案2】：

我建议，如果您希望仅在选中相关无线电 input 时更改 background-color：

#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 Fiddle.

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

【讨论】：

是的，我可以做到，如果可能的话，我希望能够有绿色开启和红色关闭:)
您想要绿色（开）和红色（关）背景色，而不管收音机是否被检查？还是在选中相关无线电时为绿色（开）和红色（关）？

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

【讨论】：