CSS切换无线开关自定义
CSS切换无线开关自定义
提问于 2013-02-11 18:30:43
我发现了这个CSS广播切换，我认为它可以很好地工作在我们网站的某一部分，我如何对其进行个性化设置，使on为绿色，off为红色？
JsFiddle
我已经试着改变了一些css，但似乎不能得到这是我需要做两个独立的类的位？
#bounds input:checked + span {
background-color:#404040;
color:#F7F7F7;
border-radius:3px;
}欢迎您的想法和例子，谢谢您:)
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-02-11 18:35:11
这里有一个小把戏：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;
}Stack Overflow用户
发布于 2013-02-11 18:40:59
我建议，如果您只想在选中相关的无线电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。
虽然这种方法依赖于元素在标记中的顺序，但它不需要添加任何其他属性。
Stack Overflow用户
发布于 2013-02-11 18:59:01
或者像这样..
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14810313
复制相关文章
相似问题
腾讯云开发者
