CodeKitHub¿Qué es esta herramienta?
Las casillas de verificación por defecto se ven distintas en cada navegador y son difíciles de estilizar directamente, porque su apariencia la dibuja el sistema operativo y no el CSS plano. La solución estándar es ocultar visualmente la casilla nativa y estilizar un elemento hermano en su lugar, controlado por el estado :checked de la casilla — el input sigue siendo totalmente funcional y accesible, solo cambia su apariencia.
Esta herramienta construye ese patrón para tres estilos comunes: una caja redondeada con una marca de verificación animada, un interruptor deslizante estilo iOS, y un círculo relleno (tipo radio button). Haz clic en la casilla de la vista previa para ver el estado marcado, ajusta tamaño y color de acento, y copia el CSS.
Fuente: Selectors Level 4, W3C — la especificación que define la pseudoclase :checked en la que se basa esta técnica.
¿Por qué utilizarlo?
- Vista previa en vivo y clickeable — activa la casilla para ver exactamente cómo se ven los estados marcado y sin marcar.
- Tres estilos distintos y muy usados en una sola herramienta: caja con marca, interruptor y círculo relleno.
- El elemento subyacente sigue siendo un <input type="checkbox"> real, así que la navegación por teclado, el envío de formularios y los lectores de pantalla siguen funcionando con normalidad.
- Tamaño y color de acento ajustables, generados directamente en los valores CSS en vez de dejarlos como variables por rellenar.
- No necesita fuente de iconos, archivo SVG ni imagen — la marca y el círculo se dibujan con bordes y pseudo-elementos CSS normales.
- Gratis, funciona en tu navegador, sin registro.
Cómo utilizarlo
- Elige un estilo: marca redondeada, interruptor deslizante o círculo relleno.
- Arrastra el control de tamaño para agrandar o achicar la casilla.
- Elige un color de acento — se convierte en el color de fondo y borde del estado marcado.
- Haz clic en la casilla del panel de vista previa para confirmar que los estados marcado y sin marcar se ven bien.
- Copia el CSS generado en tu hoja de estilos y úsalo en cualquier <input type="checkbox"> envuelto con la misma estructura que la vista previa.
Ejemplo
Entrada
Estilo: marca redondeada · Tamaño: 24px · Color: naranjaResultado
.css-checkbox .mark {
width: 24px;
height: 24px;
border: 2px solid #f97316;
border-radius: 5px;
}
.css-checkbox input:checked + .mark {
background: #f97316;
}El input de la casilla se oculta visualmente; la caja visible es un <span> hermano estilizado con el estado :checked del input, con un pequeño borde rotado dibujado como marca de verificación al marcarse.
Por qué ocultar la casilla nativa en vez de eliminarla
Es tentador saltarse el <input> real y construir una casilla solo con un <div> estilizado con un evento de clic, pero eso pierde gratis el soporte de teclado, el envío de formularios y la semántica para lectores de pantalla. El patrón que genera esta herramienta mantiene el input real en el marcado — solo oculto visualmente con opacity: 0 y reposicionado — así el navegador lo sigue tratando como una casilla genuina en todo lo que importa, mientras un elemento hermano se encarga del estilo visible.
Los tres estilos de un vistazo
- Marca redondeada: el patrón clásico de cuadrado con marca, el más común en campos de formulario, casillas de aceptación de términos y listas de selección múltiple.
- Interruptor deslizante: se percibe como un ajuste de encendido/apagado instantáneo más que como un campo de formulario — mejor para pantallas de preferencias que para listas de casillas.
- Círculo relleno: un aspecto minimalista, parecido a un radio button, útil cuando una caja cuadrada se ve demasiado pesada junto a elementos de interfaz redondeados.
Combinarlo con el resto de tu interfaz
El color de acento generado solo afecta al estado marcado — elige el color de tu marca o de tus botones para que la casilla se sienta coherente con el resto de la página. Combínalo con el mismo border-radius que uses en otros elementos de la interfaz para un look más consistente.
Preguntas frecuentes
¿La casilla con estilo personalizado sigue siendo accesible?
Sí — el elemento subyacente sigue siendo un <input type="checkbox"> real, solo oculto visualmente en vez de eliminado. Sigue recibiendo foco, respondiendo al teclado (espacio para marcar/desmarcar), y los lectores de pantalla lo anuncian correctamente, porque leen el elemento input, no el span estilizado que está al lado.
¿Por qué el CSS usa un selector de hermano como input:checked + .mark?
Porque la caja visible es un elemento distinto del input real, CSS necesita una forma de estilizar ese hermano según el estado del input. El combinador + selecciona el elemento inmediatamente después del input marcado, la técnica estándar para construir estilos personalizados de checkbox y radio sin JavaScript.
¿Puedo usarlo en un formulario real, no solo en una demo?
Sí — copia el CSS generado y envuelve un input de checkbox real de tu formulario con la misma estructura mostrada en el HTML/vista previa. Al seguir siendo una casilla nativa, se envía con el formulario exactamente igual que una sin estilo, y funciona con tu lógica de validación existente.
¿Por qué la marca de verificación está animada en el estilo redondeado?
Una breve animación de escala en la marca hace que el estado marcado se sienta más intencional y responsivo que una aparición/desaparición instantánea, un patrón común en checkboxes de interfaces pulidas. Es una pequeña regla @keyframes incluida junto al resto del código generado.
¿El estilo de interruptor necesita un HTML distinto?
No — los tres estilos usan el mismo marcado subyacente (un input de checkbox oculto más un elemento hermano para la forma visible). Cambiar de estilo en esta herramienta solo cambia las reglas CSS aplicadas a esa misma estructura, así que puedes cambiar de estilo después sin tocar tu HTML.