Das Eingabefeld ist eine unverzichtbare Komponente von Webseiten, aber jeder Browser verfügt über unterschiedliche Anzeigestile von Eingangsboxen.
Zum Beispiel:
Das obige Bild ist das Eingabefeld, das mit Google Chrome und IE -Browser geliefert wird, und der Stil ist nicht zufriedenstellend, daher schreiben die meisten von ihnen die Stile selbst.
Hier ist ein einfacher Textfeldstil
Eingabe {Rand: 1px solide #CCC; Polsterung: 7px 0px; Border-Radius: 3px; / *CSS3 Attribut, dh unterstützt nicht */ padding-links: 5px; } Reproduktionsbild:
Stilattribut Bedeutung:
Grenze: 1PX Solid #CCC; /*Stellen Sie den Eingangsbox Rand, die Farbe, Größe und fest gepunktete Linien der Kantenlinie ein*///////////
Polsterung: 7px 0px; /* Stellen Sie die Höhe des Eingangsfelds fest, Sie können auch die Höhe verwenden. Wenn Sie die Höhe verwenden, wird der Cursor des Eingabefeldes oben platziert, und andere Stile müssen so eingestellt werden, dass sie das Problem beheben und möglicherweise nicht kompatibel ist.
Border-Radius: 3px; / *Der Grundstück Stein in CSS3, dh nicht unterstützt */
Padding-Links: 5px; /*Lassen Sie die Anzeige 5 Pixel von links entfernt sein, und am Anfang wird der Cursor an der Kante des Eingangsfelds links befestigt*////////////////
Grundsätzlich werden die oben genannten Stile heutzutage häufiger verwendet, und dann einige andere Einstellungen der Eingabe
Zum Beispiel: Attribut -Platzhalter
Diese Eigenschaft hat im Eingabefeld einen schnellen Textffekt. Die CSS3 -Eigenschaft unterstützt den IE nicht
Eingabe Klicken Sie Klicken, um den Spezialeffekt zu leuchten:
Eingabe {Rand: 1px solide #CCC; Polsterung: 7px 0px; Border-Radius: 3px; Padding-Links: 5px; -Webkit-Box-Shadow: Einschub 0 1PX 1PX RGBA (0,0,0, 0,075); Box-Shadow: Einschub 0 1PX 1PX RGBA (0,0,0, .075); -Webkit-Übergang: Border-Color-Leichterung. -O-Übergangs: Border-Color-Leichterung.15s, Box-Shadow-Ease-In-Out .15s; Übergang: Border-Color-Leichterung .15s, Box-Shadow Easy-in-Out .15s} Eingabe: Fokus {Border-Color: #66afe9; Umriss: 0; -Webkit-Box-Shadow: Einschub 0 1px 1px RGBA (0,0,0, .075), 0 0 8px RGBA (102,175,233, .6); Box-Shadow: Einschub 0 1PX 1PX RGBA (0,0,0, .075), 0 0 8px RGBA (102,175,233, .6)}} Reproduktionsbild: