4

Estoy intentando hacer un checkbox personalizado en el que se cambie el color de fondo de mi label según está seleccionado o no, y de esta fora esconder el checkbox en si. El código que tengo es este:

.milabel {
  background-color:#c9c9c9;
  border-radius:5px;
  padding:20px;
  cursor:pointer;
  }
input:checked{
  }
<input id="micb" type="checkbox"><br><br>
<label class="milabel" for="micb"> Hola mundo! Soy clickeable </label>

Sé que con el input:checked se puede modificar el checkbox en sí para darle cierto estilo pero desconozco.

3 respuestas 3

5

Para cambiar el color del label

.checkBoxLabel {
  width: 200px;
  padding: 10px 0;
  background-color:#c9c9c9;
  border-radius:5px;  
  cursor:pointer;
  text-align: center;
  display: inline-block;
}

.checkBox:checked + .checkBoxLabel {
  background-color: pink;
  color: #fff;
}

div {
  margin-top: 40px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<div>
  <input type="checkbox" id="check" class="checkBox">
  <label for="check" class="checkBoxLabel">My Label</label>
</div>

Update:

Para esconder el checkbox al seleccionar label puedes usar un poco de jQuery:

$('.checkBoxLabel').click(function(){
  
  var checkbox = $('#check');
  
  if ( checkbox.css('visibility') == 'hidden' ) {
    
    checkbox.css('visibility','visible');
    
  } else {
    
    checkbox.css('visibility','hidden');
  }
});
.checkBoxLabel {
  width: 200px;
  padding: 10px 0;
  background-color:#c9c9c9;
  border-radius:5px;
  cursor:pointer;
  text-align: center;
  display: inline-block;
}

.checkBox:checked + .checkBoxLabel {
  background-color: pink;
  color: #fff;
}

div {
  margin-top: 40px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" id="check" class="checkBox">
  <label for="check" class="checkBoxLabel">My Label</label>
</div>

9
  • Gracias, esto es lo que estaba buscando pero me he dado cuenta de una cosa... el label no es personalizable (no se puede modificar su alto y ancho por ejemplo para tener varios iguales de tamaño sin depender de su contenido) Como se podría hacer algo así?
    – Pavlo B.
    Commented el 29 dic. 2016 a las 15:25
  • @PavloB. Mira, en mi respuesta si que modifico el alto y ancho del label (es donde establezco el color). Un label no puede obtener altura y anchura porque es inline. Tendrás que ponerlo como inline-block o block para que pueda obtener altura y anchura. inline-block si lo que quieres es poner varios en la misma línea. Commented el 29 dic. 2016 a las 15:28
  • 1
    creo que esta mal formulada la pregunta, yo pense que querias cambiar el estilo del checkbox
    – hubman
    Commented el 29 dic. 2016 a las 15:28
  • @rn3w Yo también, de hecho, me dí cuenta de lo que preguntaba realmente al ver la respuesta de aldanux. Commented el 29 dic. 2016 a las 15:29
  • @PavloB. - Te he dejado un ejemplo como puedes modificar el <label> Commented el 29 dic. 2016 a las 15:32
4

Al checkbox por sí solo no se le puede cambiar el fondo.

Sin embargo, puedes ocultar el checkbox y utilizar la label que está asociada a el para simular el checkbox. Al estar la label asociada al checkbox podremos darle estilos según los eventos que tenga el checkbox en cada momento.

En este caso, para el estado del checkbox false la label estará en rojo y cuando el estado del checkbox sea true, la label estará en verde.

input[type="checkbox"]{
  display: none;
}

input[type="checkbox"] + label{
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: red;
  border-radius: 5px;
}

input[type="checkbox"]:checked + label{
  background-color: green;
}
<input id="micb" type="checkbox">
<label class="milabel" for="micb"></label>
<span>Hola mundo! Soy clickable!</span>

1

En SO en inglés tenés esta solución sin labels, spans, etc., solo con pseudo-elementos:

    label {
        user-select: none;
    }
    
    input[type="checkbox"] {
        appearance: none;
    }
    
    input[type="checkbox"]:after {
        content: '';
        display: inline-flex;
        align-items: center;
        justify-content: center; 
        width: 14px;
        height: 14px;
        line-height: 14px;
        border: 1px solid grey;
        border-radius: 3px;
        vertical-align: bottom;
    }
    
    input[type="checkbox"]:checked:after {
        content: '✓';
        background-color: black;
        color: white;
    }
    <label>
        <input id="micb" type="checkbox">
        <span>Hola mundo! Soy clickable!</span>
    </label>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.