|
Consideraciones •Este artículo está diseñado específicamente para personas que entienden CSS y HTML. •Recomendamos encarecidamente usar Google Chrome para facilitar las diferentes tareas relacionadas con esta funcionalidad. •Tenga en cuenta que en esta guía vamos a usar Visual Studio Code para crear los archivos .css y .js, pero usted es libre de usar la herramienta que prefiera. |
Si desea encontrar los IDs específicos de los elementos que quiere personalizar, consulte el artículo Encontrar IDs en el Inspector.
Resumen
Puede usar la carga de archivos CSS para redefinir o extender la apariencia visual predeterminada de los controles dentro de los forms de Bizagi. Este archivo le permite modificar tipografía, colores, espaciado, alineación, bordes y diseños para cada control que aparece en un form. Con CSS, puede adaptar la interfaz de cada form para que coincida con su branding o con cualquier requisito visual específico de su aplicación.
Cuando modifica el archivo CSS global para personalizaciones de forms, está aplicando estilos que afectan a todos los forms dentro de la app. Estas reglas se aplican automáticamente a todos los forms a menos que un selector más específico las sobrescriba. Por esta razón, los cambios en este archivo pueden impactar etiquetas, campos de entrada, tablas, botones y cualquier componente de la interfaz en todos los forms, a menos que se use una mayor especificidad en CSS para evitarlo.
Cuando modifica el selector body en el archivo CSS de personalización de forms, está aplicando estilos globales a toda la interfaz de los forms. El selector body define las propiedades visuales base de todos los forms; puede elegir cambiar ciertos forms según la identificación utilizada.
Lista de elementos relacionados con esta funcionalidad:
•Body
•Text fields
•Required text label
•Number fields
•Invalid number fields
•Date pickers
•Combo boxes
•Combo Box Items
•Buttons
•Links
Body
Color general del texto
Los controles, etiquetas y el texto general dentro del form heredan este color, a menos que definan el suyo propio.
Ejemplo
Esto cambia el color general del texto usado en todos los controles dentro del form.
body {
color: #333;
}
Text fields
Resaltado de borde al enfocar
Mejora la visibilidad al estilizar el borde cuando se selecciona el campo de texto.
Ejemplo
Esto estiliza el estado enfocado de un campo de texto para que el borde se vuelva azul cuando el usuario hace clic en él.
input[type="text"]:focus {
border-color: #007bff;
box-shadow: 0 0 3px #007bff;
}
Required text label
Indicador de campo obligatorio
Usa un asterisco para indicar visualmente los campos obligatorios.
Ejemplo
Esto resalta un campo de texto obligatorio agregando un asterisco rojo.
label.required::after {
content: "*";
color: red;
margin-left: 4px;
}
Number fields
Fuente más grande para legibilidad
Mejora la claridad visual para valores numéricos largos.
Ejemplo
Esto aplica un tamaño de fuente mayor a los campos numéricos.
input[type="number"] {
font-size: 1.1rem;
}
Invalid number fields
Resaltado de entrada inválida
Muestra visualmente cuando el número ingresado no cumple las reglas de validación.
Ejemplo
Esto cambia el color de fondo de los campos numéricos cuando el valor es inválido.
input[type="number"]:invalid {
background-color: #ffe6e6;
}
Date pickers
Estilo del ícono de calendario
Mejora la visibilidad del ícono del selector de fecha.
Ejemplo
Esto estiliza el ícono de calendario dentro de un date picker.
input[type="date"]::-webkit-calendar-picker-indicator {
filter: brightness(0);
}
Combo boxes
Apariencia del desplegable
Aplica branding a todos los desplegables dentro del form.
Ejemplo
Esto personaliza el panel desplegable de un combo box.
select {
background-color: #f7f7f7;
border-radius: 6px;
}
Combo box items
Área clickeable más grande
Mejora la usabilidad aumentando el espaciado interno de los ítems del desplegable.
Ejemplo
Esto aumenta el área clickeable de los ítems del combo box.
select option {
padding: 10px;
}
Buttons
Efecto de crecimiento al pasar el cursor
Destaca los botones al pasar el cursor con una animación suave de escalado.
Ejemplo
Esto crea un efecto hover en los botones que aumenta ligeramente su tamaño.
button:hover {
transform: scale(1.04);
}
Links
Estado de enlace visitado
Ayuda a los usuarios a identificar los enlaces que ya han abierto.
Ejemplo
Esto cambia el color de un enlace cuando ha sido visitado.
a:visited {
color: purple;
}
|
Tenga en cuenta que no es necesario republicar la app para ver los cambios realizados mediante esta funcionalidad. Una vez que se sube un archivo, la app mostrará automáticamente las personalizaciones deseadas. |
|
Recuerde que para ciertos elementos es necesario usar los IDs específicos de los elementos que quiere personalizar, consulte el artículo Encontrar IDs en el Inspector si tiene alguna duda. |
Last Updated 12/9/2025 10:14:15 AM