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;
    }

最終效果：