Cómo cambiar el estilo de los campos checkbox y aportar mediante CSS un aspecto totalmente distinto a estos controles de formulario.
Los campos checkbox son muy complicados a la hora de manipular los estilos predeterminados del navegador. De hecho, no responden a la mayoría de los atributos de estilo, por lo que hay que ingeniárselas para conseguir que estos elementos tengan un aspecto diferente en las páginas web.
Sin embargo, mediante una ocultación de la interfaz predeterminada del navegador, podemos luego aplicar nuestros propios estilos CSS a los campos checkbox y llegar a donde queramos en términos de diseño.
Ocultar la interfaz predeterminada con appearance: none
El primer paso para conseguir cambiar el estilo de un checkbox es usar el atributo appearance de CSS, asignando el valor none.
mycheck {
appearance: none;
}
Este atributo no funciona como un "display: none", que simplemente haría que el elemento no apareciese en la página, evitando cualquier funcionamiento del checkbox. En cambio "appearance: none;" sirve para eliminar la interfaz predeterminada del checkbox, aunque el elemento permanece en la página y sigue funcionando igualmente, aunque sin estilos.
En resumen, puedes entender appearance: none como un reset total a los estilos predeterminados del checkbox, o de cualquier otro elemento del formulario.
Aplicar CSS al checkbox
Ahora viene la parte más interesante, que es aplicar unos estilos diferentes a nuestro checkbox.
De entre todos los estilos propuestos a continuación, queremos destacar varias cosas:
- Aplicaremos un color de fondo a nuestro checkbox
- Aplicaremos un tamaño de anchura y altura
- Opcionalmente colocaremos un borde, un redondeado o cualquier otra personalización que necesitemos.
- El dibujo interno del checkbox que aparecerá al confirmarlo, lo colocaremos como una imagen de fondo, mediante un SVG.
El dibujo interno del checkbox será el típico icono de confirmación, que en algunos países llama "palometa" de manera muy acertada.
.mycheck {
cursor: pointer;
background-color: #fff;
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
width: 48px;
height: 48px;
appearance: none;
border: 2px solid #888;
}
Los estilos podrán ser por supuesto variables en función del diseño al que queramos llegar. Sin embargo, lo importante es que el color del fondo sea el mismo que el color del SVG, para que no se vea la confirmación cuando no está chequeado. En este caso el fondo es de color blanco y el SVG es blanco también.
En el HTML simplemente tenemos que asegurarnos que usemos la clase que hemos definido para este checkbox personalizado.
<p>
<input type="checkbox" class="mycheck" id="mycheck"> <label for="mycheck">Deseo aprender css</label>
</p>
Estilos cuando el chekbox está chequeado con :checked
El siguiente paso consiste en usar :checked para aplicar estilos en el momento en el que se haya confirmado el checkbox. Seguramente ya conozcas :checked, pero si no, cabe decir que es una pseudo-clase CSS que permite aplicar estilos cuando el elemento tiene un estado de checkeado.
.mycheck:checked {
background-color: rgb(236 72 153);
}
Como estás viendo, el efecto consiste simplemente en cambiar el color de fondo de la interfaz del checkbox, de modo que se podrá ver SVG que hemos usado como imagen de fondo en el diseño.
Completando los estilos del checkbox
A partir de aquí ya nos quedaría aplicar otros estilos al elemento, usando otras pseudo clases como por ejemplo :focus, que será muy útil para mejorar la accesibilidad de este elemento de formulario, indicando al usuario que el foco de la aplicación está sobre él.
.mycheck:focus {
border-color: rgb(80, 67, 250);
}
También necesitaríamos aplicar otro estilo para el momento en el que el checkbox está deshabilitado, mediante la pseudo clase :disabled.
.mycheck:disabled {
background-color: rgb(198, 198, 198);
background-image: none;
}
En el anterior estilo es importante eliminar la imagen de fondo para que no se vea el la imagen SVG de confirmación del checkbox.
Sin embargo, el checkbox podría estar deshabilitado pero chequeado, en cuyo caso tendríamos que volver a asegurarnos que la imagen de confirmación se vea.
.mycheck:disabled:checked {
background-color: rgb(198, 198, 198);
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
Animaciones CSS para el checkbox
Ahora que tenemos el control sobre los estilos del checkbox vamos a aplicar unas animaciones sencillas para aportar algo más de brillantez a nuestro diseño.
Lo haremos con una sencilla transición del color de fondo de la caja de confirmación.
.mycheck {
transition: background-color 0.3s ease-in-out;
}
El estilo completo ahora sería el siguiente.
.mycheck {
cursor: pointer;
background-color: #fff;
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
width: 48px;
height: 48px;
appearance: none;
border: 2px solid #888;
transition: background-color 0.3s ease-in-out;
}
Podemos ir un poco más allá en la animación permitiendo que haya una entrada y salida de la palometa con un desplazamiento, lo que incrementará visualmente la vistosidad de la transición. Para ello haremos una translacion de la imagen de fondo, con un cambio entre el estilo chequeado o no.
Vamos a dejar aquí el código de un segundo estilo para chekbox alternativo, con una animación más completa.
.mycheck2 {
display: inline-flex;
align-items: center;
cursor: pointer;
background-color: #fff;
color: #fff;
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
width: 24px;
height: 24px;
appearance: none;
border: 2px solid #888;
background-position: 0 -2rem;
background-size: 100%;
background-repeat: no-repeat;
transition: all 0.3s ease-in-out;
}
.mycheck2:checked {
background-color: rgb(75, 156, 13);
color: rgb(75, 156, 13);
background-position: 0 0;
}
Conclusión y ejemplo completo
Ya para acabar, vamos a mostrar el detalle completo que hemos preparado para este artículo, que consiste en el código HTML y CSS que tendrás que usar para personalizar el aspecto de los CSS, obviamente cambiando lo que estimes oportuno para que se adapte a tu diseño.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personalizar un input checkbox con CSS</title>
<style>
body {
background-color: rgb(233, 233, 213);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
p {
display: flex;
align-items: center;
}
label {
margin-left: 0.5rem;
}
.mycheck {
border: 3px solid red;
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
width: 300px;
height: 300px;
appearance: none;
display: inline-block;
vertical-align: middle;
background-origin: border-box;
padding: 0;
user-select: none;
flex-shrink: 0;
color: #2563eb;
background-color: #888;
border-color: #6b7280;
border-width: 1px;
}
.mycheck {
cursor: pointer;
background-color: #fff;
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
width: 48px;
height: 48px;
appearance: none;
border: 2px solid #888;
transition: background-color 0.3s ease-in-out;
}
.mycheck:checked {
background-color: rgb(236 72 153);
}
.mycheck:focus {
border-color: rgb(80, 67, 250);
}
.mycheck:disabled {
background-color: rgb(198, 198, 198);
background-image: none;
}
.mycheck:disabled:checked {
background-color: rgb(198, 198, 198);
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.mycheck2 {
cursor: pointer;
background-color: #fff;
color: #fff;
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
width: 24px;
height: 24px;
appearance: none;
border: 2px solid #888;
background-position: 0 -2rem;
background-size: 100%;
background-repeat: no-repeat;
transition: all 0.3s ease-in-out;
}
.mycheck2:checked {
background-color: rgb(75, 156, 13);
color: rgb(75, 156, 13);
background-position: 0 0;
}
</style>
</head>
<body>
<h1>Personalizar un elemento checkbox con CSS</h1>
<p>
<input type="checkbox" class="mycheck" id="mycheck"> <label for="mycheck">Deseo aprender css</label>
</p>
<p>
<input type="checkbox" class="mycheck2" id="mycheck2"> <label for="mycheck2">Deseo que salga el sol</label>
</p>
<p>
<input type="checkbox" class="mycheck" id="mycheck3" disabled> <label for="mycheck3">Este checkbox está
desactivado</label>
</p>
<p>
<input type="checkbox" class="mycheck" id="mycheck4" disabled checked> <label for="mycheck4">Este checkbox está
deshabilitado pero chequeado</label>
</p>
</body>
</html>
Esperamos que te haya resultado de utilidad este artículo para cambiar los estilos CSS de los campos checkbox. Voy a acabar agradeciendo a Tailwind CSS, que es donde he visto los estilos que ellos usaban para mejorar sus checkboxes, mediante su plugin oficial para formularios, en los que me he inspirado para escribir este artículo.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...