how to reposition label which sits on top of the checkbox

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/

possible duplicate of [How to style checkbox using CSS?](http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css) — BSMP, May 16 '15 at 05:41

score 1 · Accepted Answer · answered May 16 '15 at 05:48

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

how to reposition label which sits on top of the checkbox

1 Answers1