Uso de ferramentas de desenvolvimento com formulários

Você pode experimentar a aparência ou o layout de seus formulários usando as Ferramentas de desenvolvimento. Sempre que você executar um formulário, se clicar com o botão direito do mouse nele e, em seguida, selecionar Inspecionar, as Ferramentas de desenvolvimento serão abertas. Esse tutorial mostra como experimentar com estilos CSS em Ferramentas de desenvolvimento. Este exemplo mostra como alterar a cor de todos os títulos de Campo de texto dentro de uma Grade de dados.

Observação:

As alterações que você aplica em Ferramentas de desenvolvimento são temporárias. Se você quiser aplicá-las permanentemente ao formulário, você precisa inserir seu código CSS personalizado dentro do campo de propriedade CSS personalizado do formulário e aplicá-lo para cada componente que você deseja estilizar, usando a propriedade Classe CSS Personalizada de um componente.

1. Execute um formulário que tenha uma Grade de dados com componentes de Campo de texto dentro dele.

2. Clique com o botão direito do mouse dentro do formulário e selecione Inspecionar.

3. Para se concentrar no elemento exato ao qual você deseja aplicar estilos CSS, selecione ou pressione Ctrl + Shift + C. Agora você pode selecionar o título do componente Campo de texto .

4. Na seção Estilos das Ferramentas de desenvolvimento, você pode ver várias classes CSS. Para este exemplo, encontre a classe .table e altere a propriedade color para violet.

   

5. Agora vamos aplicar essa cor permanentemente à Grade de dados. No painel Propriedades do formulário, insira a seguinte classe CSS dentro do campo CSS personalizado :

   .color-change {
       color: violet
       }
   

6. Edite um Campo de Texto dentro do seu formulário e acesse a guia Exibição .

7. Em Classe CSS Personalizada, insira a classe CSS personalizada que você adicionou na etapa cinco.

   

Salve o componente e verifique os resultados.