Verwenden von Dev-Tools mit Formularen

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

Hinweis: Die Änderungen, die Sie in den Dev Tools anwenden, sind vorübergehend. 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 gestalten möchten Komponente.

1. Führen Sie ein Formular aus, das ein Datenraster mit Textfeldkomponenten enthält.
2. Klicken Sie mit der rechten Maustastein das Formular und wählen Sie dann Untersuchen aus.
3. Um sich auf genau das Element zu konzentrieren, auf das Sie CSS-Stile anwenden möchten, wählen Sie , oder drücken Ctrl + Shift + C. Jetzt können Sie den Titel der Textfeldkomponente auswählen.
4. Im Abschnitt Stile der Entwicklungstools sehen Sie verschiedene CSS-Klassen. 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.