Softonic

Generador de casillas de verificación CSS

Paso 1 / 2
Resultados

Las casillas de verificación predeterminadas se ven diferentes en cada sistema operativo y son difíciles de personalizar. Este generador crea CSS puro que da a una casilla nativa el aspecto que quieras: elige el color del estado marcado, el color del borde, el tamaño y el radio de las esquinas. Como el estilo se aplica a un input real, el teclado, los lectores de pantalla y el envío de formularios siguen funcionando. Copia el CSS generado y añádelo a tu hoja de estilos.

Cómo estilizar una casilla de verificación

  1. 1

    Elige los colores

    Selecciona el color de fondo para el estado marcado y el color del borde de la casilla.

  2. 2

    Define el tamaño

    Elige un tamaño entre 12 y 48 px.

  3. 3

    Define la forma

    Elige el radio de las esquinas de la casilla, hasta 20 px.

  4. 4

    Copia el CSS

    Previsualiza la marca y copia la regla generada en tu hoja de estilos.

Qué hace el CSS generado

La regla se aplica directamente al input con appearance: none, que elimina el aspecto predeterminado para que la casilla pueda estilizarse:

.checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

Cuando la casilla está marcada, se rellena con el color elegido y aparece una marca blanca dibujada con CSS:

.checkbox:checked {
  background: #10b981;
  border-color: #10b981;
}
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

Por qué un input nativo

El estilo nunca sustituye el elemento por un div: el <input type="checkbox"> real conserva la activación con teclado, el soporte de lectores de pantalla y el envío del formulario. appearance: none solo cambia el aspecto. Si necesitas soportar versiones antiguas de Safari, añade -webkit-appearance: none a la regla.

Foco y cursor

La regla generada incluye una transición de color suave, pero no estilos de cursor o foco. Añade tus propias reglas para :hover y :focus-visible para que los usuarios de teclado vean siempre dónde está el foco, por ejemplo un contorno de color alrededor de la casilla.

La marca

La marca es una pequeña línea blanca girada 45 grados. Si necesitas otro color o un trazo más fino o más grueso, edita los valores border y border-width de la regla ::after.

Preguntas frecuentes

No. Solo produce CSS. Aplica la clase a un input real de tu formulario, con o sin etiqueta visible.

Sí. La regla usa appearance: none sobre el input nativo, así que el valor se envía con normalidad y el teclado y los lectores de pantalla siguen funcionando.

El tamaño se ajusta en el generador, de 12 a 48 px. El color y el grosor de la marca se editan en la regla ::after del CSS generado.

Para objetivos táctiles, busca al menos 24 px, idealmente 44 px como otros controles. Mantén la casilla alineada con el texto de la etiqueta en tu diseño.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.

Formateador de JSON

Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.

Herramienta disponible en otros idiomas