1

Cordial saludo:

Estoy haciendo un .html con bootstrap y me gustaría modificar la forma y color de como se muestra el checkbox cuando es valido o no.

Me gustaría algo como en la siguiente gráfica:

introducir la descripción de la imagen aquí

tengo el siguiente input:

<div class="form-check ageAlert">
    <input class="form-check-input btnCheckYellow" type="checkbox" name="flexRadioDefault" id="flexRadioDefault1">
    <label class="form-check-label" for="flexRadioDefault1">
    > de 15<br>< de 40
    </label>
</div>

con el siguiente css:

.btnCheckYellow{
    background: yellow;
    width:20px;
    height:20px;
    margin-top: 10%;
}

.ageAlert{
    margin-top: 10%;
}

Alguien podría de darme una idea de como hacerlo?

2 respuestas 2

2

No es necesario usar otro elemento para lograr el objetivo, puedes personalizar sin problemas un elemento checkbox usando sólo CSS.

Para ello debes primero eliminar el estilo que provee el navegador usando la propiedad CSS appearance y establecer su valor a none. De esta forma los estilos propios del navegador (que dependen en gran medida del sistema operativo) no serán aplicados al elemento checkbox y podrás poner tus propios estilos.

Por ejemplo, si deseo tener un checkbox que se muestre como un círculo amarillo, podría hacer lo siguiente:

.custom-checkbox {
    /* Elimino los estilos del navegaror */
    appearance: none;
    /* Aplico mis estilos */
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: yellow;
}

Para añadir la barra invertida que deseas que el elemento muestre cuando su estado es checked, debes usar la pseudo clase :checked. En este caso, usaremos un linear-gradient, por ejemplo:

.custom-checkbox:checked {
    background:linear-gradient(315deg, yellow 45%, black 45%, black 55%, yellow 55%, yellow 100%);
}

El código completo funcional puede verse así:

.container {
    display: flex;
    align-items: center;
}

.custom-checkbox {
    appearance: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: yellow;
}

.custom-checkbox:checked {
    background:linear-gradient(315deg, yellow 45%, black 45%, black 55%, yellow 55%, yellow 100%);
}
<div class="container">
    <label>Custom checkbox</label>
    <input type="checkbox" id="checkbox-1" class="custom-checkbox" />
</div>

Basta que ajustes el tamaño y otros elementos que se ajusten a tus estilos o tema.

1
  • Muchas gracias... eres un genio, Me funcionó perfectamente. Commented el 2 ago. 2023 a las 18:30
2

La tecnica para lograr esto es:

  1. Ocultar el input
  2. Ligar el input oculto a un label mediante el atributo for, de esta manera el acto de presionar el label es lo mismo que presionar el input
  3. Luego en el label colocar todos los CSS necesario para mostrarlo como deseamos
  4. Además podemos usar una regla como esta .labelcheck:checked + label para ingresar CSS adicional para el caso que el checkbox está checkado
  5. Para tu caso particular, es posible generar una línea transversal usando linear-gradient
    .labelcheck{
     display:none;
    }
    .labelcheck + label{
        background-color: yellow;
        width:20px;
        height:20px;
        display: inline-block;
        border-radius: 50%;
        cursor:pointer;
    }
    
    .labelcheck:checked + label{
          background-image:linear-gradient(315deg, transparent 40%, rgba(0,0,0,1) 50%, transparent 60%);
    
    }
    <input type="checkbox" class="labelcheck" name="flexRadioDefault" id="flexRadioDefault1">
    <label for="flexRadioDefault1">
    </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.