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.