如何重新定位位於複選框頂部的標籤

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>