css3状态伪类选择器:checked修改按钮默认样式

在表单元素中，单选框和复选框都有选中和未选中状态，css3中可以通过状态伪类选择器：checked去修改按钮的默认样式

html代码

    <form action="#">
      <div class="wrapper">
        <div class="box">
          <input type="checkbox" checked="checked" id="usename" /><span>√</span>
        </div>
        <lable for="usename">我是选中状态</lable>
      </div>
  
      <div class="wrapper">
        <div class="box">
          <input type="checkbox"  id="usepwd" /><span>√</span>
        </div>
        <label for="usepwd">我是未选中状态</label>
      </div>
   </form> 

 

css代码

 form{
        border:1px solid #ccc;
        padding:20px;
        width:300px;
        margin:30px auto;
    }
    .wrapper{
        margin-bottom:10px;
    }
    .box{
        display: inline-block;
        width:20px;
        height: 20px;
        margin-right: 10px;
        position: relative;
        border:2px solid orange;
        vertical-align: middle;
    }
    .box input{
          opacity: 0;
    }
    .box span{
        position: absolute;
        top:-10px;
        right: 3px;
        font-size:30px;
        font-weight:30px;
        font-family: Arial;
        transform:rotate(30deg);
        color:orange;
    }
    input[type='checkbox']+span{
        opacity: 0;
    }
    input[type='checkbox']:checked + span {
        opacity: 1;
    }

最终效果：