Utilisation des outils de développement avec des formulaires

Vous pouvez expérimenter l'apparence ou la mise en page de vos formulaires à l'aide des Outils de développement. Chaque fois que vous exécutez un formulaire, si vous cliquez dessus avec le bouton droit de la souris, puis sélectionnez Inspecter, les Outils de développement s'ouvrent. Ce tutoriel montre comment découvrir les styles CSS dans les outils de développement. Cet exemple montre comment changer la couleur de tous les titres de champ de texte dans une grille de données.

Remarque :

Les modifications que vous appliquez dans les outils de développement sont temporaires. Si vous souhaitez les appliquer définitivement au formulaire, vous devez saisir votre code CSS personnalisé dans le champ de propriété CSS personnalisé du formulaire, puis l'appliquer à chaque composant que vous souhaitez créer, à l'aide de la propriété Classe CSS personnalisée d'un composant

1. Exécutez un formulaire qui contient une Grille de données avec des composants de Champ de texte .

2. Faites un clic droit dans le formulaire, puis sélectionnez Inspecter.

3. Pour vous concentrer sur l'élément exact auquel vous souhaitez appliquer les styles CSS, sélectionnez ou appuyez sur Ctrl + Shift + C. Vous pouvez maintenant sélectionner le titre du composant Champ de texte .

4. Dans la section Styles des outils de développement, vous pouvez voir différentes classes CSS. Pour cet exemple, recherchez la classe .table et remplacez la propriété color par violet.

   

5. Appliquez désormais définitivement cette couleur à la grille de données. Dans le panneau Propriétés du formulaire, saisissez la classe CSS suivante dans le champ CSS personnalisé :

   .color-change {
       color: violet
       }
   

6. Modifiez un champ de texte dans votre formulaire et accédez à l'onglet Afficher .

7. Dans la Classe de CSS personnalisée, saisissez la classe de CSS personnalisée que vous avez ajoutée à l'étape 5.

   

Enregistrez le composant et consultez les résultats.