CSS切换无线电开关定制 [英] CSS Toggle Radio Switch Customisation

问题描述

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

I found this CSS Radio Toggle which I think would work well for a section of our site, how would I individualise it so that on is green and off is red?

JsFiddle

I'已经尝试改变一些CSS，但似乎无法得到这是我需要做两个单独的类的一点？

I've tried altering some of the css but cant seem to get is this the bit I need to make two seperate classes of?

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

欢迎您的想法和例子：

推荐答案

下面是一个小提琴： HTTP：//的jsfiddle .net / RkvAP / 1304 / $ b

Here's a fiddle: 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;
}

这篇关于CSS切换无线电开关定制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！