how to reposition label which sits on top of the checkbox - css

Question

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

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>