Cambiar los estilos predeterminados de los formularios HTML5 changing-default-styles-of-html-forms
Los formularios HTML5 se procesan con las funciones HTML5 y el estilo del formulario procesado se realiza con CSS. El aspecto predeterminado de los formularios HTML5 es similar a su representación en PDF. Los desarrolladores pueden utilizar CSS personalizadas para cambiar el aspecto predeterminado de los formularios HTML5.
Este artículo proporciona información paso a paso para cambiar el estilo de un formulario HTML5 y el artículo Introducción a los estilos contiene información detallada sobre varios aspectos relacionados con el estilo de los formularios HTML5. Asegúrese de leer Introducción a los estilos antes de realizar los pasos mencionados en este artículo.
Las dos imágenes siguientes muestran la diferencia entre los estilos predeterminados y los personalizados.
Aplicar estilo a los formularios style-your-forms
-
Elija un perfil al que agregar estilos personalizados
Acceda a la interfaz CRX DE en la URL: https://<server>:<port>/crx/de y cree un perfil o elija uno existente. Para saber cómo crear un perfil, consulte Crear un perfil
-
Crear una hoja de estilos CSS para aplicar estilo a los formularios HTML5
Navegue hasta la carpeta en la que ha creado el procesador de perfiles y cree un archivo de hoja de estilo CSS. Los pasos a seguir son los siguientes:
-
Haga clic con el botón derecho en la carpeta y seleccione crear > crear archivo en el menú
-
En el cuadro de diálogo Crear archivo, escriba el nombre de la hoja de estilo. Asegúrese de utilizar la extensión .css (por ejemplo, stylesheet.css)
-
En el panel de navegación, abra el archivo CSS que ha creado.
-
Defina las clases CSS de los componentes a los que desea aplicar estilo y agregue estilos en esas clases.
Para saber qué clases CSS crear para un componente en particular en los formularios HTML5, consulte Introducción a los estilos.
-
-
Incluya la hoja de estilo en el procesador de perfiles
Abra la página Procesador de perfiles (archivo jsp) en CRX DE e incluya el archivo CSS en la página, justo debajo de la biblioteca de cliente XFA. Siga estos pasos para incluir el archivo CSS en el perfil.
-
Busque la siguiente línea en la página del procesador:
<cq:includeClientLib categories="xfaforms.profile" />
-
Inserte lo siguiente debajo de la línea anterior para incluir la hoja de estilo:
<link href="/path/to/stylesheet" rel="stylesheet" type="text/css"/>
-
Guarde el archivo.
-