如何重新定位位于复选框

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;