如何设置这个正方形单选框

checkbox

• 可以通过label+input的方式实现自定义的选择框

<input type="checkbox" id="checkbox_a1" class="chk_1" /> 
    <label for="checkbox_a1" ></label> 

       .chk_1 { 
           display: none; 
       } 
        
       .chk_1 + label { 
           background-color: #FFF; 
           border: 1px solid #C1CACA; 
           box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); 
           padding: 9px; 
           border-radius: 5px; 
           display: inline-block; 
           position: relative; 
           vertical-align:middle;
       } 
       .chk_1 + label:active { 
           box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); 
       } 
        
       .chk_1:checked + label { 
           background-color: #ECF2F7; 
           border: 1px solid #92A1AC; 
           box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1); 
           color: #243441; 
       } 
        
       .chk_1:checked + label:after { 
           content: '\2611'; /* 这里是用到了特殊字符和图标*/
           position: absolute; 
           top: -6px; 
           left: 0px; 
           color: #758794; 
           width: 100%; 
           text-align: center; 
           font-size: 1.2em; 
           padding: 1px 0 0 0; 
           vertical-align: text-top; 
       }