Saltar al contenido
Toolars
Explorar
Informar de un error

Diseño · utilidad Local

Generador de casillas CSS

CSS Checkbox Generator

Diseña casillas personalizadas sobre un input real —con estados de foco y desactivado incluidos— y copia el CSS con tus colores y su transición.

Ruta de la tarea / de la entrada al resultado

Define el tamaño del control

Funciona en local · No se sube nada

Cómo funciona Generador de casillas CSS, privacidad y herramientas relacionadas

Ruta de la tarea / de la entrada al resultado

Cómo diseñar una casilla CSS personalizada

  1. 01

    Define el tamaño del control

    La marca escala según el espacio interior del borde, no el tamaño exterior. La vista previa y la exportación usan la misma forma de bordes CSS. Haz clic en la vista previa o enfócala y pulsa Espacio para cambiar su estado nativo.

  2. 02

    Da forma al marco

    Usa un control de 18–64 px y un borde de 1–8 px. Deben quedar al menos 8 px dentro del borde para la marca. Las combinaciones inválidas vacían la vista previa y desactivan la exportación.

  3. 03

    Elige los colores de cada estado

    Elige Color del borde para el contorno en reposo y Color al marcar para el estado relleno. Mantén el Color al marcar lo bastante oscuro para contrastar con la marca blanca que queda detrás, porque la marca siempre es blanca.

  4. 04

    Previsualiza ambos estados

    Activa Mostrar estado marcado para comparar el lado en reposo y el relleno en la vista previa en vivo. La marca entra con una transición de 160 ms y un pequeño escalado: exactamente el movimiento que el CSS exportado reproduce entre estados.

  5. 05

    Copia o descarga el CSS

    Pulsa Copiar CSS o Descargar .css para guardar toolars-checkbox.css. El conjunto de reglas mantiene un input real debajo — appearance: none solo lo repinta — y los estados :focus-visible y :disabled vienen incluidos en la exportación.

  6. 06

    Mantén el marcado nativo

    Aplica la clase .checkbox directamente a un elemento input real y acompáñalo de un label como harías con cualquier casilla. El foco de teclado, el comportamiento de clic y los anuncios de la tecnología de asistencia siguen funcionando porque nada semántico se sustituye. El fondo blanco en reposo forma parte de la regla, así que el estado vacío se lee bien sobre superficies tintadas.

Datos de la herramienta

Procesamiento
En tu navegador
La entrada sale del dispositivo
Nunca
Retención
No se guarda nada
Precio
Gratis

Tus datos se quedan en el navegador.

Generador de casillas CSS usa su ruta de ejecución local verificada y no crea un historial oculto de entradas ni salidas.

Ejecución local

Se ejecuta dentro de la pestaña actual del navegador.

Sin procesamiento oculto

Los datos activos de la herramienta nunca se convierten en un registro de documento de Toolars.

No se necesita cuenta

Usa el flujo de trabajo principal sin crear un perfil. Los favoritos se sincronizan con tu cuenta después de iniciar sesión.

Restablecimiento inmediato

Limpia la pestaña y los datos de trabajo activos desaparecen.

Qué hace Generador de casillas CSS en realidad

Una página de ajustes llena de casillas predeterminadas parece sin terminar, y un sistema de diseño necesita el mismo control en cada formulario sin arrastrar una dependencia de JavaScript. Como el CSS exportado conserva un elemento input genuino, el foco de teclado y los anuncios del lector de pantalla siguen funcionando — mientras los colores de marca que se están probando nunca salen de la pestaña del navegador. Un toque rápido al interruptor de vista previa confirma los dos lados de la interacción antes de copiar cualquier código. La misma regla sirve para un único formulario o para toda una biblioteca de componentes.

Preguntas frecuentes

¿La casilla sigue siendo accesible?
Sí. El marcado sigue siendo un elemento input real; appearance: none solo sustituye su pintado. La exportación incluye un contorno :focus-visible de 3 px en tu color de acento y un estado :disabled atenuado, y el estado marcado sigue siendo el nativo que anuncia la tecnología de asistencia.
¿Por qué se rechazó mi ancho de borde?
Usa un control de 18–64 px y un borde de 1–8 px. Deben quedar al menos 8 px dentro del borde para la marca. Las combinaciones inválidas vacían la vista previa y desactivan la exportación.
¿Cómo se dimensiona la marca de verificación?
La marca escala según el espacio interior del borde, no el tamaño exterior. La vista previa y la exportación usan la misma forma de bordes CSS. Haz clic en la vista previa o enfócala y pulsa Espacio para cambiar su estado nativo.
¿Qué ocurre cuando la casilla cambia de estado?
La marca escala de cero a tamaño completo en una transición de transformación de 160 ms mientras el fondo se rellena con tu Color al marcar. Con prefers-reduced-motion la transición desaparece y el estado simplemente cambia de golpe, así que nada se anima para las personas sensibles al movimiento.
¿Qué es fijo en la exportación y qué puedo cambiar?
El fondo en reposo y la marca son siempre blancos, así que elige un Color al marcar con suficiente contraste frente al blanco. El contorno de foco de 3 px, su desplazamiento y el estado :disabled a media opacidad son valores fijos que puedes editar libremente tras pegar la regla.
¿Se sube algo?
No. Todo se renderiza localmente en la pestaña actual, no hace falta cuenta, y ningún valor entra en almacenamiento, registros o la red. Pulsa Restablecer para volver a los valores predeterminados.

Continuar en Diseño

Tareas relacionadas, no un callejón sin salida.

Pasa a otro espacio de trabajo enfocado sin volver al índice completo.

Generador de animaciones de carga CSS

CSS Loader Generator

Diseña un anillo orbital o tres puntos que rebotan con marco, trazo, velocidad y colores ajustables, y copia el CSS con @keyframes y reduced-motion.

Crear

Generador de interruptores CSS

CSS Switch Generator

Diseña interruptores de CSS puro con pista, deslizador y colores de ambos estados ajustables, y copia el código con foco accesible y reduced-motion.

Crear

Generador de clip-path CSS

CSS Clip Path Generator

Edita polígonos arrastrando, con el teclado o mediante coordenadas. Usa cuatro formas predefinidas y copia una declaración clip-path o CSS completo de forma local.

Crear

Generador de patrones de fondo CSS

CSS Background Pattern Generator

Crea fondos de puntos, cuadrícula o diagonal solo con degradados CSS, sin imágenes: ajusta mosaico, marca y colores, y copia la regla de tres líneas.

Crear