Tenho o código abaixo:
.divCheckList .valorBool,
.divCheckList .divCheckBox {
height: 34px;
display: inline-block;
border:#CCC .1px solid;
vertical-align:middle;
}
.divCheckList .valorBool {
line-height: 34px;
}
.divCheckList .divCheckBox .checkBox {
display: none;
}
.divCheckList .labelCheckBox {
display:block;
width:60px;
height:34px;
background-color:#CCC;
border:none;
border-radius:34px;
}
.divCheckList .labelCheckBox:after {
display:block;
width:26px;
height:26px;
background-color:#FFF;
border:#000 .1px solid;
border-radius:50%;
content:"";
}
html
<div class="divCheckList">
<label class="valorBool">NÃO</label>
<div class="divCheckBox">
<input type="checkbox" name="cb" id="cb" class="checkBox">
<label for="cb" class="labelCheckBox"></label>
</div>
<label class="valorBool">SIM</label>
</div>
Que mostra a seguinte imagem:
Porém, gostaria de centralizar a bolinha branca de forma tal que ela ficasse espaçada nos cantos e em cima.
Tentei com margin: 4px;
mas a imagem distorce.
Como corrigir?
top: 10%; left: 5%; position: relative;
no:after
ficou ótimo.