Show Menu
TEMAS×

Estilo en línea de los componentes de formularios adaptables

Puede definir el aspecto y el estilo generales de un formulario adaptable especificando estilos mediante el editor de temas. Además, puede aplicar estilos CSS en línea a componentes de formulario adaptables individuales y previsualizar los cambios sobre la marcha. Los estilos en línea anulan el estilo proporcionado en el tema.

Aplicar propiedades CSS en línea

Para agregar estilos en línea a un componente:
  1. Abra el formulario en el editor de formularios y cambie el modo a modo de estilo. Para cambiar el modo al modo de estilo, en la barra de herramientas de la página, toque > Estilo .
  2. Seleccione un componente en la página y toque el botón de . Las propiedades de estilo se abren en la barra lateral.
    También puede seleccionar componentes del árbol de jerarquía de formularios en la barra lateral. El árbol de jerarquía de formularios está disponible como objetos de formulario en la barra lateral.
    También puede seleccionar un componente de la barra lateral. En el modo Estilo, puede ver los componentes en Objetos de formulario. Sin embargo, la lista Objetos de formulario de la barra lateral enumera componentes como campos y paneles. Los campos y paneles son componentes genéricos que pueden contener componentes como cuadro de texto y botones de opción.
    Cuando se selecciona un componente de la barra lateral, se muestran todos los subcomponentes enumerados y las propiedades del componente seleccionado. Puede seleccionar un subcomponente específico y aplicarle un estilo.
  3. Haga clic en una ficha de la barra lateral para especificar las propiedades de CSS. Puede especificar propiedades como:
    • Dimensiones y posición (configuración de visualización, relleno, altura, anchura, margen, posición, índice z, flotante, borrar, desbordamiento)
    • Texto (familia de fuentes, grosor, color, tamaño, altura de línea y alineación)
    • Fondo (imagen y degradado, color de fondo)
    • Borde (anchura, estilo, color, radio)
    • Efectos (Sombra, Opacidad)
    • Avanzado (le permite escribir CSS personalizada para el componente)
  4. Del mismo modo, se pueden aplicar estilos a otras partes de un componente, como Utilidad, Rótulo y Ayuda.
  5. Toque Listo para confirmar los cambios o Cancelar para descartarlos.

Ejemplo: estilos en línea para un componente de campo

Las siguientes imágenes muestran un campo de texto antes y después de que se le apliquen estilos en línea.
Componente de cuadro de texto antes de aplicar propiedades de estilo en línea
Observe el cambio en el estilo del cuadro de texto como se muestra en la siguiente imagen después de aplicar las siguientes propiedades CSS.
Selector
CSS, propiedad
Value
Efecto
Campo
border
Ancho del borde = 2 px
Estilo de borde=Sólido
Color del borde=#1111
Crea un borde negro de 2 píxeles de ancho alrededor del campo
Cuadro de texto
background-color
#6495ED
Cambia el color de fondo a CornflowerBlue (#6495ED)
Nota: Puede especificar un nombre de color o su código hexadecimal en el campo de valor.
Etiqueta
Dimensiones y posición > anchura
100px
Corrige la anchura como 100 px para la etiqueta
Icono de ayuda de campo Texto > Color de fuente #2ECC40 Cambia el color de la cara del icono de ayuda.
Descripción larga
text-align
center
Alinea la descripción larga de la ayuda al centro
Estilo del cuadro de texto después de aplicar el estilo en línea Figura: Componente Cuadro de texto después de aplicar propiedades de estilo en línea
Siguiendo los pasos anteriores, puede seleccionar y aplicar estilo a otros componentes, como paneles, botones de envío y botones de radio.
Las propiedades de estilo varían según el componente seleccionado.