0

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:

inserir a descrição da imagem aqui

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.

inserir a descrição da imagem aqui

Como corrigir?

15
  • Consegui corrigir colocando position: relative na div mais externa e position absolute na label com after. Será que é a maneira correta? 1/09/2017 às 23:48
  • Esse botão irá mudar de posição ao clicar em "SIM"? Tem que ver como vai ficar com isso.
    – Meu ovo
    2/09/2017 às 0:13
  • 1
    Do jeito que está, adicionando top: 10%; left: 5%; position: relative; no :after ficou ótimo.
    – Meu ovo
    2/09/2017 às 0:15
  • Vou continuar o código com margin:4px; mesmo. Depois vejo se vai dar problema quando for colocar o botão clicavel 2/09/2017 às 12:18
  • Boto fé........
    – Meu ovo
    2/09/2017 às 12:19

1 Resposta 1

0

Você pode, como disse nos comentários, adicionar o position: relative na .labelCheckBox e position: absolute no :after.

.divCheckList .labelCheckBox {
  position: relative;
  ...
}
.divCheckList .labelCheckBox:after {
  position: absolute;
  top: 3px;
  left: 3px;
  ...
}

E, quando selecionada a opção, aplicar a mudança de posição.

.divCheckList .checkBox:checked + .labelCheckBox:after {
  right: 3px;
  left: initial;
}

JSFiddle

6
  • Seu código ficou excelente, apenas eu botaria top=12% pq fica bem no centro. Com top=3px fica descentralizado.
    – Meu ovo
    2/09/2017 às 15:04
  • Pra ficar bem no centro mesmo, de forma automática: top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%);.
    – Meu ovo
    2/09/2017 às 15:08
  • Mas o valor certo mesmo seria top=4px. (34-26)/2 = 4.
    – Meu ovo
    2/09/2017 às 15:11
  • também foi possível apenas fazendo .divCheckList .divCheckBox .checkBox:checked + .labelCheckBox:before { right:0;}, Sem os translate e mantendo margin: 4px; Porém, dessa forma, não dá para fazer a transição até right:0 sem o efeito lento na transição. 2/09/2017 às 16:29
  • Dá uma olhadinha nesse exemplo da W3Schools w3schools.com/howto/howto_css_switch.asp 2/09/2017 às 16:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .