如何重新定位位于复选框顶部的标签

Question

当我对复选框进行了样式设置时，标签位于复选框的顶部。但我希望它分开。然而，由于我使用的CSS，我觉得非常棘手，因为复选框和标签共享和高度。有人可以建议如何操纵这个标签？

CSS

input[type=checkbox] { 
display:none; 
} 

input[type=checkbox] + label 
{ 
background: #D9D9D9; 
height: 40px; 
width: 40px; 
border-radius:20px; 
display:inline-block; 
padding: 0 0 0 0px; 
cursor:pointer; 
border:1px solid #00AAFF; 
} 
input[type=checkbox]:checked + label 
{ 
background: #00B0F0; 
height: 40px; 
width: 40px; 
border-radius:20px; 
display:inline-block; 
padding: 0 0 0 0px; 
cursor:pointer; 
} 

这里的小提琴：http://jsfiddle.net/vxbbfyr0/

Answer 1

#container > div{ 
 
    -webkit-user-select:none; 
 
} 
 
input[type=checkbox] { 
 
display:none; 
 
} 
 
    
 
label span{ 
 
background: #D9D9D9; 
 
height: 40px; 
 
width: 40px; 
 
border-radius: 20px; 
 
display:inline-block; 
 
vertical-align: middle;  
 
padding: 0 0 0 0px; 
 
cursor:pointer; 
 
border:1px solid #00AAFF; 
 
    
 
    
 
} 
 
label input[type=checkbox]:checked + span{ 
 
background: #00B0F0; 
 
}

<div id="container"> 
 
     <div> 
 
     
 
     <label for="checkbox1"> 
 
      <input type="checkbox" id="checkbox1" class="item"/>   
 
      <span></span> 
 
      Label 1 
 
     </label> 
 
      
 
     </div> 
 
     <div>  
 
     <label for="checkbox2"><input type="checkbox" id="checkbox2" class="item"/> 
 
      <span></span> 
 
      label 2</label> 
 
     </div> 
 
     <div> 
 
     
 
     <label for="checkbox3"> 
 
      <input type="checkbox" id="checkbox3" class="item"/> 
 
<span></span>   
 
      label 3</label> 
 
     </div> 
 
    </div>