Usar herramientas de desarrollo con formularios

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

Nota: Los cambios que aplique en las herramientas de desarrollo son temporales. Si desea aplicarlos de forma permanente al formulario, debe introducir su código CSS personalizado dentro del campo de propiedad CSS personalizado del formulario y luego aplicarlo a cada componente al que desee aplicar estilo, utilizando la propiedad Clase CSS personalizada de una componente.

1. Ejecutar 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 luego selecciona Inspeccionar.
3. Para centrarte en el elemento exacto al que quieres aplicar los 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 las herramientas de desarrollo, puedes ver varias clases de CSS. Para este ejemplo, busca la clase .table y cambia la propiedad color a violet.
   
   

   

   
   
5. Ahora apliquemos permanentemente 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 de CSS personalizado, introduce la clase de CSS personalizado que añadiste en el paso cinco.
   
   

   

   
   
   Guarde el componente y consulte los resultados.