Wie Eingangs Elemente innerhalb Buttons einstellen Mit CSS

Web-Formulare verwenden Sie den "Input"-Tag, um Schaltflächen "Submit" zu erstellen, obwohl Eingang Elemente in der Regel auch Textfelder von vielen Arten, von Namen zu Telefonnummern und Daten enthalten. Verwenden Sie einen ID-Selektor in CSS, um nur die Schaltfläche in einem Cross-Browser kompatibel fashion Ziel. Justieren Sie den Text innerhalb der Taste mit CSS-Eigenschaften, die Polsterung zu ändern, Farben und Schriften. Diese Eigenschaften helfen Ihnen Feinabstimmung "Submit" -Tasten, so dass sie gut ausgerichtet und richtig formatiert aussehen.

 

ADJUST ELEMENTS

 

Öffnen Sie die Web-Seite mit dem Button "Submit" in Notepad oder einem Code-Editor. Suchen Sie nach "style"-Tags zwischen Ihren "Kopf"-Tags und fügen Sie diesen Code, wenn Sie nicht finden sie:

 

style type = "text / css"

 

/ Style

 

Alle Ihre CSS-Code geht zwischen den "style"-Tags.

 

Scrollen Sie bis zum Ende Ihres Web-Formular-Code und suchen Sie nach einem Code ähnlich wie diese:

 

input type = "submit" name = "submit" id = "submit" value = "Senden" /

 

Finden Sie die ID-Namen, in der beispielsweise die ID Name wird auf "Eintragen". Ändern Sie den Text für die Schaltfläche, indem Sie die Eigenschaft "Wert", wenn Sie machen es anders wollen.

 

Geh zurück zu deinem "style"-Tags und schreiben diesen Code ein:

 

# {Einreichen

 

padding: 20px 10px;

 

}

 

Ändern Sie auf "Eintragen", um den ID-Namen finden Sie in der "Input"-Tag entsprechen. Set Polsterung für die Taste, um den Abstand zwischen dem Knopf Text und dem Rand der Taste zu erstellen. In dem obigen Beispiel setzt der erste Wert für die vertikale padding padding während der zweite Wert legt die horizontale Polsterung.

 

Legen Sie die Schriftart mit "font-family" und stylen Schaltfläche Text wie nötig, mit fett oder kursiv:

 

# {Einreichen

 

padding: 20px 10px;

 

font-family: Arial;

 

font-style: italic;

 

font-weight: bold;

 

}

 

Geben Sie Ihren Text-Taste eine Farbe:

 

# {Einreichen

 

padding: 20px 10px;

 

font-family: Arial;

 

font-style: italic;

 

font-weight: bold;

 

color: blue;

 

}

 

Tipps und Warnungen

Wenn Sie nicht brauchen, Kompatibilität mit Internet Explorer Versionen 6 bis 8, ersetzen "# Eintragen" mit "input [type =" submit "]" für flexiblere Code. In diesem Fall auf "Eintragen" ist nicht die ID Name, aber die Art der input-Element.

 

In "float: right;" nach rechts ausrichten Ihre Schaltfläche mit Ihrem Web-Formular.