CSS开关按钮样式详解(3)

input.cmn-toggle-yes-no + label { padding: 2px; width: 120px; height: 60px; } input.cmn-toggle-yes-no + label:before, input.cmn-toggle-yes-no + label:after { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; color: #fff; font-family: "Roboto Slab", serif; font-size: 20px; text-align: center; line-height: 60px; } input.cmn-toggle-yes-no + label:before { background-color: #dddddd; content: attr(data-off); transition: transform 0.5s; backface-visibility: hidden; } input.cmn-toggle-yes-no + label:after { background-color: #8ce196; content: attr(data-on); transition: transform 0.5s; transform: rotateY(180deg); backface-visibility: hidden; } input.cmn-toggle-yes-no:checked + label:before { transform: rotateY(180deg); } input.cmn-toggle-yes-no:checked + label:after { transform: rotateY(0); }

浏览器兼容性

上面的这些在浏览器兼容方面的要求是，IE8及以下的浏览器不能识别:checked伪类，因此你需要检测浏览器，如果是老旧的IE，则直接回退到原始的checkbox，css transitions 属性不支持IE9及以下浏览器，但这仅仅会影响切换过程中的过渡部分，除此之外没有其他毛病能够正常工作。

总结

这是一个关于一些很好的CSS切换开关示例！这种技术使得一切完全复合语义，不会增加任何疯狂的标记，并且用纯CSS就可以完成。当然，你需要注意浏览器兼容性情况，但是你可以使用条件样式来兼容旧版浏览器，使用上面提到的例子，并不会产生什么不足之处。

以上所述是小编给大家介绍的CSS开关按钮样式详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

（编辑：ASP站长网）