Verwenden von Dev-Tools mit Formularen

Sie können mit Dev Tools mit dem Design oder Layout Ihres Formulars experimentieren. Wenn Sie ein Formular ausführen, mit der rechten Maustaste darauf klicken und dann Untersuchen auswählen, wird Dev Tools geöffnet. Dieses Tutorial zeigt, wie Sie mit CSS-Stilen in Dev Tools experimentieren können. Dieses Beispiel zeigt, wie die Farbe aller Textfeldtitel in einem Datenraster geändert wird.

Hinweis:

Die Änderungen, die Sie in Dev Tools anwenden, sind temporär. Wenn Sie sie dauerhaft auf das Formular anwenden möchten, müssen Sie Ihren benutzerdefinierten CSS-Code in das Eigenschaftsfeld Benutzerdefiniertes CSS des Formulars eingeben und ihn dann für jede Komponente anwenden, die Sie mit der Eigenschaft Benutzerdefinierte CSS-Klasse formatieren möchten Komponente.

1. Führen Sie ein Formular aus, das ein Datenraster mit Textfeldkomponenten enthält.

2. Klicken Sie mit der rechten Maustaste in das Formular und wählen Sie dann Untersuchen aus.

3. Um sich auf das genaue Element zu konzentrieren, auf das Sie CSS-Stile anwenden möchten, wählen Sie oder drücken Sie Ctrl + Shift + C. Sie können nun den Titel der Textfeld- Komponente auswählen.

4. Im Abschnitt Stile von Dev Tools können Sie verschiedene CSS-Klassen sehen. Suchen Sie in diesem Beispiel die Klasse .table und ändern Sie die Eigenschaft color in violet.

   

5. Wenden wir diese Farbe nun dauerhaft auf das Datenraster an. Geben Sie im Eigenschaftenbereich des Formulars die folgende CSS-Klasse in das Feld Benutzerdefiniertes CSS ein:

   .color-change {
       color: violet
       }
   

6. Bearbeiten Sie ein Textfeld in Ihrem Formular und wechseln Sie zur Registerkarte Anzeige.

7. Geben Sie in der Benutzerdefinierten CSS-Klasse die benutzerdefinierte CSS-Klasse ein, die Sie in Schritt fünf hinzugefügt haben.

   

Speichern Sie die Komponente und überprüfen Sie die Ergebnisse.