Usar herramientas de desarrollo con formularios

Puedes experimentar con el aspecto o el diseño de tus formularios utilizando las herramientas de desarrollo. Cada vez que ejecutas un formulario, si haces clic con el botón derecho del ratón y luego seleccionas Inspeccionar, se abre Dev Tools. Este tutorial muestra cómo experimentar con estilos CSS en Dev Tools. Este ejemplo muestra cómo cambiar el color de todos los títulos de campo de texto dentro de una cuadrícula de datos.

Nota:

Los cambios que aplicas en Herramientas de desarrollo son temporales. Si desea aplicarlos de forma permanente al formulario, debe introducir su código CSS personalizado dentro del campo Propiedad CSS personalizada del formulario y luego aplicarlo para cada componente al que desee aplicar estilo, utilizando la propiedad Clase CSS personalizada de un componente.

1. Ejecuta un formulario que tenga una cuadrícula de datos con componentes de campo de texto en su interior.

2. Haz clic con el botón derecho dentro del formulario y selecciona Inspeccionar.

3. Para centrarte en el elemento exacto al que deseas aplicar estilos CSS, selecciona o pulsa Ctrl + Shift + C. Ahora puedes seleccionar el título del componente Campo de texto .

4. En la sección Estilos de Herramientas de desarrollo, puedes ver varias clases CSS. Para este ejemplo, busca la clase .table y cambia la propiedad color a violet.

   

5. Ahora vamos a aplicar de forma permanente este color a la cuadrícula de datos. En el panel Propiedades del formulario, introduce la siguiente clase CSS dentro del campo CSS personalizado :

   .color-change {
       color: violet
       }
   

6. Edita un campo de texto dentro de tu formulario y ve a la pestaña Visualización .

7. En Clase CSS personalizada introduce la clase CSS personalizada que añadiste en el paso cinco.

   

Guarde el componente y consulte los resultados.