Das Aussehen eines HTML-Formulars kann stark mit CSS verbessert werden:
Styling Eingabefelder
Verwenden Sie die width Eigenschaft , um die Breite des Eingabefeldes zu bestimmen:
Das Beispiel gilt für alle oben <input> Elemente. Wenn Sie nur einen bestimmten Eingabetyp zu gestalten möchten, können Sie Attributselektoren verwenden:
-
input[type=text]- nur Textfelder auswählen -
input[type=password]- nur Passwortfelder auswählen -
input[type=number]- wird nur die Nummer Felder auswählen - etc..
Gepolsterte Eingänge
Verwenden Sie die padding - Eigenschaft - Raum im Textfeld hinzuzufügen.
Tipp: Wenn Sie viele Eingänge hintereinander haben, können Sie auch etwas hinzufügen wollen margin , mehr Raum , um außerhalb von ihnen:
Beispiel
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
} Versuch es selber "  | Beachten Sie, dass wir die eingestellten box-sizing Eigenschaft border-box . Dies stellt sicher, dass die Polsterung und schließlich Grenzen in der gesamten Breite und Höhe der Elemente enthalten sind. Lesen Sie mehr über die box-sizing Immobilie in unserem CSS3 Box Sizing Kapitel. |
|---|
angrenzende Eingänge
Verwenden Sie die border Eigenschaft der Grenze Größe und Farbe zu ändern, und verwenden Sie die border-radius Eigenschaft zu abgerundeten Ecken hinzu:
Wenn Sie nur eine untere Grenze wollen, verwenden Sie die border-bottom - Eigenschaft:
Farbige Eingänge
Verwenden Sie die background-color Eigenschaft eine Hintergrundfarbe mit dem Eingang hinzuzufügen, und die color Eigenschaft , um die Textfarbe zu ändern:
Focused Eingänge
Standardmäßig fügt einige Browser eine blaue Umrandung um den Eingang, wenn es den Fokus erhält (angeklickt). Sie können dieses Verhalten entfernen , indem das Hinzufügen outline: none; an den Eingang.
Verwenden Sie den :focus Wähler etwas mit dem Eingabefeld zu tun , wenn es den Fokus erhält:
Eingang mit Symbol / Bild
Wenn Sie ein Symbol in der Eingabe, verwenden Sie die background-image - Eigenschaft und positionieren sie mit dem background-position - Eigenschaft. Beachten Sie auch, dass wir eine große linke Polsterung fügen Sie den Raum des Symbols zu reservieren:
Beispiel
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
} Versuch es selber " Animierte Sucheingabe
In diesem Beispiel verwenden wir die CSS3 transition Eigenschaft die Breite des Sucheingabe zu animieren , wenn es den Fokus erhält. Sie werden mehr über das erfahren transition später Eigenschaft, in unserem CSS3 Transitions Kapitel.
Beispiel
input[type=text] {
-webkit-transition: width 0.4s
ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
} Versuch es selber " Styling Textbereiche
Tipp: Verwenden Sie die resize - Eigenschaft Textfelder , um zu verhindern (deaktivieren Sie die "Grabber" in der unteren rechten Ecke) der Größe verändert werden:
Beispiel
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
} Versuch es selber " Styling Select-Menüs
Beispiel
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
} Versuch es selber " Styling Eingabetasten
Beispiel
input[type=button], input[type=submit], input[type=reset]
{
background-color: #4CAF50;
border:
none;
color: white;
padding:
16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */ Versuch es selber " Weitere Informationen darüber , wie Tasten mit CSS , um Stil, unsere lesen CSS Buttons Tutorial .