Question

我发现这个CSS Radio Toggle，我认为它可以很好地用于我们网站的某个部分，我将如何将其个性化，以便on为绿色并且off为红色？

我试过改变一些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 Fiddle

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

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>

CSS切换无线电开关自定义

3 个答案: