Cómo personalizar los estilos del campo Casillas de verificación

¿Te gustaría personalizar el color del campo Casilla de verificación? Por defecto, este campo usará estilos web estándar para mostrar el campo en tu formulario. En este artículo, te explicaremos lo fácil que es hacer esto con el poder de CSS.

Sin embargo, si estás usando el Editor de bloques de WPForms, puedes ajustar fácilmente estos estilos sin necesidad de CSS personalizado. Para leer más sobre esto, echa un vistazo a esta útil guía. Cuando cambies los Estilos de campo y los Estilos de botón, podrás lograr exactamente lo mismo en el editor de bloques que con el CSS personalizado en este artículo.

En este artículo, trabajaremos usando la magia del CSS personalizado para hacer estos cambios.

Creación del formulario

Para empezar, crearás tu formulario y añadirás los campos que necesites, lo que incluirá al menos un campo de Casilla de verificación.

Si necesitas ayuda para crear tu formulario, puedes revisar fácilmente esta útil guía.

Una vez que hayas añadido el campo Casilla de verificación, haz clic en la pestaña Avanzado y, dentro de Clases CSS, añade special-checkbox-buttons. Usaremos esto como un disparador para llamar a nuestro CSS personalizado.

Personalización del estilo del campo Casilla de verificación

Una vez que hayas guardado el formulario, puedes añadir tu CSS. Si no estás seguro de dónde o cómo añadir CSS personalizado a tu sitio, por favor revisa este tutorial para obtener ayuda.

.special-checkbox-buttons input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: #fff !important;
  margin: 0 !important;
  font: inherit !important;
  color: #e27730 !important;
  width: 1.15em !important;
  height: 1.15em !important;
  border: 0.15em solid #e27730 !important;
  border-radius: 0.15em !important;
  transform: translateY(-0.075em) !important;
  display: grid !important;
  place-content: center !important;
}

.special-checkbox-buttons input[type="checkbox"]::before {
  content: "" !important;
  width: 0.65em !important;
  height: 0.65em !important;
  transform: scale(0) !important;
  transition: 120ms transform ease-in-out !important;
  box-shadow: inset 1em 1em #e27730 !important;
	transform-origin: bottom left !important;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important;
}

.special-checkbox-buttons input[type="checkbox"]:checked::before {
    transform: scale(1) !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

.special-checkbox-buttons input[type=checkbox]:checked:after {
	content: none !important;
}

Este CSS cambiará el color del borde y de la selección a #e27730, pero también añadirá una pequeña animación al realizar las selecciones.

Ya sea que uses el estilo del editor de bloques o el CSS personalizado, puedes personalizar fácilmente los colores del campo Casilla de verificación. ¿Buscas la misma funcionalidad para el campo Opción múltiple? Echa un vistazo a nuestro artículo sobre Cómo personalizar los estilos del campo Opción múltiple.