Así que he intentado activar mi selector de CSS a través del estado de la casilla de verificación, como puede ver a continuación, pero no he tenido suerte para que se active. Lo que debería suceder al hacer clic es que la marca debería desaparecer.

.i-cb input[type="checkbox"]:checked + label::before {
   display: none;
   width:0px;
   height: 0px;
}

JSFiddle : https://jsfiddle.net/7tnepc8r/4/

0
Richard 14 nov. 2017 a las 11:43

2 respuestas

La mejor respuesta

Es un problema de orden.

Debe cambiar el orden de su HTML.

El selector + se utiliza para seleccionar elementos que se colocan inmediatamente después (no dentro) del primer elemento especificado.

.i-cb input[type=checkbox] {
  visibility: hidden;
}

.i-cb label {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 44px;
  border: 4px solid #48c8f1;
  border-radius: 50%;
  border-top-color: transparent;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: 0;
}

.i-cb label::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 45px;
  background-color: #93c83d;
  left: 22px;
  top: -15px;
  z-index: 1;
}

.i-cb label::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 6px;
  background-color: #93c83d;
  left: 10px;
  top: 24px;
  z-index: 1;
}

.i-cb input[type=checkbox]:checked + label::after {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
} 

.i-cb input[type=checkbox]:checked + label::before {
  display: none;
  width: 0px;
  height: 0px;
}
<div class="i-cb">
  <input id="check" type="checkbox" />
  <label for="check"></label>
</div>
2
bhansa 14 nov. 2017 a las 08:53

Solo necesita cambiar el orden de marcado, porque usa el signo + que indica la etiqueta después de la entrada:

<div class="i-cb">
  <input id="check" type="checkbox" />
  <label for="check"></label>
</div>
1
Hanif 14 nov. 2017 a las 08:50