Eingabefeld und Button anpassen

Schritt für Schritt

Um das Eingabefeld und den Button anzupassen, gehen Sie wie folgt vor:

1. Betrachten Sie die Elemente in den Webentwickler-Tools . Das Wort E-Mail ist über ein HTML-Label abgebildet. Das Texteingabefeld und der Button sind vom Typ input.

   Copy

   1
   2
   3
   <label for="email" class="login">E-Mail</label>
   <input class="login" type="text" name="email" id="email" size="20" value="">
   <input type="submit" class="submit_login" value="Absenden">

   Hinweis: Vergeben Sie die Styles über die Klassen, wenn nicht jeder Text vor einem Eingabefeld gleich behandelt werden soll und der Button sowie das Texteingabefeld unterschiedliche Styles erhalten sollen.

2. Stellen Sie den Text auf fett und legen Sie einen Abstand nach rechts zum Eingabefeld fest.

   Der Text E-Mail sowie das Eingabefeld gehören der Klasse login an. Soll der Text im Eingabefeld nicht fett dargestellt werden, muss der Text folgendermaßen angesprochen werden:

   Copy

   1
   2
   3
   4
   5
   label.login {
       font-weight: bold;
       margin-right: 10px;
       }
   

3. Als Nächstes legen Sie eine Rahmenfarbe für das Textfeld fest:

   Copy

   1
   2
   3
   4
   input.login{
       border: 1px solid #696a6a;
       }
   

   Die Rahmenstärke beträgt 1px. Solid gibt an, dass der Rahmen in Form einer durchgezogenen Linie dargestellt wird. Der Farbwert folgt danach.

4. Bei Bedarf können die Ecken des Textfelds auch abgerundet dargestellt werden:

   Copy

   1
   2
   3
   4
   5
   input.login{
       border: 1px solid #696a6a;
       border-radius: 4px;
       }
   

   Der Pixelwert gibt dabei an, wie stark die Ecken abgerundet werden.

5. Legen Sie noch einen Abstand nach rechts zum Button fest:

   Copy

   1
   2
   3
   4
   5
   6
   input.login{
       border: 1px solid #696a6a;
       border-radius: 4px;
       margin-right: 10px
       }
   

6. Als nächstes erhält der Button noch ein individuelles Aussehen. Hierzu definieren Sie eine Hintergrundfarbe, entfernen den Rahmen, ändern die Textfarbe, vergeben einen Innenabstand und eine Breite des Buttons.

   Copy

   1
   2
   3
   4
   5
   6
   7
   8
   .submit_login{
       background-color: #78bdda;
       border: none;
       color: white;
       padding: 5px 20px;
       width: 150px;
   }
   

7. Um dem Nutzer ein haptisches Feedback bei Berührung des Buttons mit dem Mauszeiger zu geben, ergänzen Sie noch folgende Angabe:

   Copy

   1
   2
   3
   4
   5
   6
   7
   8
   9
   .submit_login{
       background-color: #78bdda;
       border: none;
       color: white;
       padding: 5px 20px;
       width: 150px;
       cursor: pointer;
   }
   

8. Klicken Sie auf ( Speichern).
9. Klicken Sie auf , um das Ergebnis zu betrachten.

• Sie haben das Eingabefeld und den Button angepasst.