Xhtml/html5 纯css实现开关按钮效果

原理:

  • 选中效果的实现:和文件域(input type=”file”)的美化原理很相似,通过绝对定位将按钮所在层放置于筛选框之上,那么点击这个按钮的同时相当于也选择了复选框
  • 按钮内容:通过css3的:before和:after伪元素和元素的content属性设置按钮的内容。在未选中之前,将:after伪元素的透明度设置为全透明(opacity:0),这时:after伪元素则不显示;反之,也是这样。