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

WHen I styled my checkbox, the label sits on top of the checkbox. But I want it to be separated. However due to the css I used, I find it very tricky because both checkbox and label shares the same with and height. Can someone suggest how to manipulate this label alone?

当我设置我的复选框样式时，标签位于复选框的顶部。但我希望它能分开。但是由于我使用的CSS，我发现它非常棘手，因为复选框和标签与高度相同。有人可以建议如何单独操纵这个标签吗？

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

here's the fiddle: http://jsfiddle.net/vxbbfyr0/

这是小提琴：http：//jsfiddle.net/vxbbfyr0/

1 个解决方案

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