¿Desea personalizar el color del campo Casilla de verificación? Por defecto, este campo utilizará el estilo web estándar para mostrar el campo en su formulario. En este artículo, te mostraremos lo fácil que es hacerlo con el poder de CSS.
Sin embargo, si está utilizando el Editor de Bloques de WPForms, puede ajustar fácilmente estos estilos sin necesidad de CSS personalizado. Para leer más sobre esto, por favor eche un vistazo a esta útil guía. Cuando cambie los Estilos de Campo y los Estilos de Botón, puede lograr exactamente lo mismo en el editor de bloques que con el CSS personalizado en este artículo.
Usando el editor de bloques Estilos de botones no sólo cambia el botón Enviar y el campo Casilla de verificación, sino que también cambiará los colores de los campos de opción múltiple.
En este artículo, vamos a utilizar la magia del CSS personalizado para realizar estos cambios.
Creación del formulario
Para empezar, cree su formulario y añada los campos que necesite, entre los que se incluirá al menos una casilla de verificación.
Si necesita ayuda para crear su formulario, puede consultar esta útil guía.
Una vez que haya añadido el Casilla de verificación pulse el botón Avanzado y dentro de la pestaña Clases de CSS añada special-checkbox-buttons. Usaremos esto como 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á seguro de dónde o cómo añadir CSS personalizado a su sitio, por favor revise 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 la selección a #e27730 pero también añadirá una pequeña animación a medida que se realicen las selecciones.
Tanto si utiliza el estilo del editor de bloques como el CSS personalizado, puede personalizar fácilmente los colores del campo Casilla de verificación. ¿Está buscando la misma funcionalidad para el campo de opción múltiple? Eche un vistazo a nuestro artículo sobre Cómo personalizar los estilos de los campos de opción múltiple.