Input-Elemente innerhalb der Buttons mit CSS anpassen

October 29

Webformulare verwenden das "< input >" Tag "Senden"-Schaltflächen erstellen, obwohl Eingabeelemente im Allgemeinen auch Textfelder vieler verschiedener Arten, z. B. Namen, Adressen und Termine enthalten. Verwenden Sie einen ID-Selektor in CSS nur die Schaltfläche in eine browserübergreifende kompatibler Weise als Ziel. Passen Sie den Text in der Schaltfläche unter Verwendung von CSS-Eigenschaften, die Polsterung, Schriftarten und Farben ändern. Diese Eigenschaften helfen Ihnen, Ihre "Absenden"-Buttons zu optimieren, so dass sie gut ausgerichtet und korrekt formatierte aussehen.

Anweisungen

1 Öffnen Sie die Webseite mit der Schaltfläche "Absenden" in Editor oder einem Codeeditor. Für "< >" Tags zwischen Ihrem "< Head >"-Tags suchen Sie, und fügen Sie diesen Code, wenn Sie sie nicht finden:

< Typ style = "Text/Css" >

< / style >

Geht alles von der CSS-Code zwischen die Tags "< Stil >".

2 Bildlauf zum Ende der Formularcode Web und suchen nach einem Code wie diese:

< Eingang Typ = "submit" Name = "submit" Id = "submit" Value = "Senden" / >

Suchen Sie den ID-Namen; im Beispiel ist der ID-Name "Abschicken". Ändern Sie den Text für die Schaltfläche durch Ändern der "Wert"-Eigenschaft, wenn Sie es anders machen möchten.

3 Gehen Sie zurück zu Ihrem "< Style >"-Tags und schreiben Sie diesen Code:

Einreichen von {} Padding: 10px 20px;

}

Ändern Sie entsprechend den ID-Namen finden Sie im "< input >" Tag "Abschicken". Legen Sie die Polsterung für die Taste, um die Abstände zwischen den Schaltflächentext und dem Rand der Schaltfläche zu erstellen. Im obigen Beispiel legt den ersten Wert für Polsterung legt der vertikale Abstand während der zweite Wert den horizontalen Abstand.

4 Legen Sie die Schriftart, die mit "Font-Family" und Ihre Schaltflächentext Stil, bei Bedarf mit Fett-oder Kursivschrift:

Einreichen von {} Padding: 10px 20px;

Font-Family: Arial;

Schriftschnitt: kursiv;

Font-Weight: bold;

}

5 Geben Sie Ihre Schaltflächentext eine Farbe:

Einreichen von {} Padding: 10px 20px;

Font-Family: Arial;

Schriftschnitt: kursiv;

Font-Weight: bold;

Farbe: blau;

}

Tipps & Warnungen

  • Wenn Sie keine Kompatibilität mit Internet Explorer-Versionen 6 bis 8 benötigen, ersetzen Sie "#submit" durch "Eingabe [Typ = 'Absenden']" für eine flexiblere Code. In diesem Fall "Abschicken" ist nicht dem ID-Namen sondern den Typ des input-Elements.
  • Fügen Sie "Schwimmer: Recht;" auf die Schaltfläche mit dem Web-Formular rechts auszurichten.