用CSS实现美观的单选复选框

背景

​ 使用原生的radio/checkbox会使界面很丑,所以会使用技巧实现更美观的单选框和复选框,本文只是其中的一种实现。

主要技巧

  • 隐藏原来的样式

  • 利用label实现绑定

  • 使用伪元素实现选择和未选择的不同样式

代码(没有做兼容处理)



    
        
        
        
        作业
        
        
    
    
        

结果截图

未选时.png
选中时.png

你可能感兴趣的:(用CSS实现美观的单选复选框)