CSS3修改input [type="radio"]默认样式

最近业务需求需要做一个自定义的input [type="radio"]样式，在慕课网的CSS3教程中看到了相关的一个选择器的知识:checked选择器
教程里的代码给了我一个很方便的demo。于是我自己改造了一下，实现了自己想要的效果。

talk is cheap，show me the code

Ok,let us do it
首先是HTML结构

  
工作技能:
  

    

      

        
      
      优秀：保证质量，高效，而可承担额外工作
    
    

      

        
      
      良好：能保质保量，按时完成任务
    
    

      

        
      
      中等：可基本完成任务，无明显亮点
    
    

      

        
      
      差：可基本完成任务，无明显亮点
    
    
  

接下来是比较关键的CSS

*{margin: 0;padding: 0;}
  p{
    position: absolute;
    line-height: 1;}
  form {
    display: inline-block;
    margin-left: 89px;}
  .box {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    position: relative;
    background: #fff;
    vertical-align: middle;
    border:1px solid #e4e4e7;
    border-radius: 100%;}
  .box input {
    opacity: 0;
    position: absolute;
    top:-3px;
    left:-4px;
    width: 100%;
    height:100%;
    z-index:100;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/}
  input+span {
    display: block;
    width: 6px;
    height: 6px;
    border-radius:50%;
    position: absolute;
    background: #1796f9;
    top: 50%;
    left:50%;
    margin: -3px 0  0 -3px;
    z-index:1;}
  input[type="radio"] + span {
    opacity: 0;}
  input[type="radio"]:checked + span {
    opacity: 1;}

话不多说，上图

效果图