Platzhalter, also häufig ausgegraute Textelemente in einer Eingabe, können beim Stylen mühsam sein. Glücklicherweise haben wir eine kurze, aber effektive CSS-Lösung gefunden, mit der Sie den Platzhaltertext Ihrer Eingabe in jeder gewünschten Farbe und Deckkraft gestalten können. Lesen Sie weiter für den Code.
Ändern der Textfarbe des Platzhalters
Beginnen wir mit einer einfachen Eingabe und etwas Platzhaltertext. In diesem Beispiel verwenden wir das Wort „Suche“, Sie können aber alles verwenden, was Sie möchten. Der grundlegende HTML-Code ist unten:
HTML
Der Eingabe- (und Textbereichs-)Platzhaltertext hat standardmäßig eine hellgraue Farbe, wir können dies jedoch mit ein paar Zeilen CSS ändern. Hier malen wir die Eingabe Textrot mit einem HTML-Farbnamen, aber jede Farbmethode ist ausreichend (HEX, RGB, HSL).
CSS
::-webkit-input-placeholder ( /* Chrome */ color: red; ) :-ms-input-placeholder ( /* IE 10+ */ color: red; ) ::-moz-placeholder ( /* Firefox 19 + */ Farbe: Rot; Deckkraft: 1; ) :-moz-placeholder ( /* Firefox 4 - 18 */ Farbe: Rot; Deckkraft: 1; )Beachten Sie, dass es wichtig ist, die verschiedenen Herstellerpräfixe einzubeziehen, um so viele Browser wie möglich zu unterstützen. Nur der Eingabe-Platzhaltertext von Firefox weist standardmäßig eine leichte Transparenz auf, sodass es nicht erforderlich ist, die Opazitätseigenschaft in IE oder Chrome festzulegen.
Ändern der Textfarbe des Platzhalterfokus
Okay, wir haben die Farbe des Platzhaltertexts erfolgreich in Rot geändert, aber es wäre schön, wenn etwas passieren würde, wenn ein Benutzer in unsere Eingabe klickt. Mithilfe derselben CSS-Eigenschaften mit Herstellerpräfix können wir die Deckkraft des Eingabeplatzhaltertexts ändern auf Fokus.
CSS
Eingabe ( Umriss: keine; Polsterung: 12 Pixel; Randradius: 3 Pixel; Rand: 1 Pixel durchgehend schwarz; ) ::-webkit-input-placeholder ( /* Chrome */ Farbe: rot; Übergang: Deckkraft 250 ms, einfaches Ein- und Aussteigen ; ) :focus::-webkit-input-placeholder ( Deckkraft: 0,5; ) :-ms-input-placeholder ( /* IE 10+ */ Farbe: Rot; Übergang: Deckkraft 250 ms Ease-in-out; ) :focus :-ms-input-placeholder ( Deckkraft: 0,5; ) ::-moz-placeholder ( /* Firefox 19+ */ Farbe: Rot; Deckkraft: 1; Übergang: Deckkraft 250 ms Ease-in-out; ) :focus:: -moz-placeholder ( opacity: 0,5; ) :-moz-placeholder ( /* Firefox 4 - 18 */ color: red; opacity: 1; Transition: opacity 250ms easy-in-out; ) :focus:-moz-placeholder (Deckkraft: 0,5; )Im obigen Beispiel haben wir ein paar grundlegende Stile für die Eingabe selbst hinzugefügt und einen Übergang für die Deckkraft hinzugefügt, um das Erlebnis noch ein wenig schöner zu machen. Schauen Sie sich die Demo an und experimentieren Sie mit anderen CSS-Eigenschaften und Übergängen.
Platzhalter ist eine Pseudoklasse oder ein Pseudoelement, das für die Anzeige des Feldnamens verantwortlich ist. Im Kern handelt es sich dabei um ein Tag (nennen wir es der Einfachheit halber so), in das Sie ein Wort eingeben und der Benutzer es darin sieht. Eine Art Hinweis oder Name für jedes Formularfeld.
Jeder Browser behandelt dieses Tag anders und sein Stil lässt zu wünschen übrig. Um die Standardstile zu ändern, fügen Sie einfach ein paar Codezeilen zur Stildatei hinzu. Es gibt nichts Kompliziertes.
Allerdings muss berücksichtigt werden, dass wir nicht alles ändern können.
Unter der Stilvielfalt stehen uns in diesem Fall folgende Dinge zur Verfügung:
- Schriftstärke – Festlegen der Textstärke
- Schriftgröße – Wählen Sie die Textgröße aus
- Schriftfamilie – Schriftartenauswahl
- Hintergrund - Hintergrund und Hintergrundbild
- Farbe – Textfarbe
- Wortabstand – Legen Sie den Abstand zwischen Wörtern fest
- Buchstabenabstand – Legen Sie den Abstand zwischen Buchstaben fest
- Textdekoration – Auswahl der Wortdekoration. Unterstrichen, durchgestrichen usw.
- Vertical-Align – Vertikale Ausrichtung festlegen
- Texttransformation – Auswahl zum Ändern des Textes. Alles in Groß- oder Kleinschreibung usw.
- line-height – Abstand zwischen Zeilen
- text-indent – legt einen linken Einzug für die erste Zeile eines Absatzes fest
- Textüberlauf – Auswahl der Anzeige von Text, der nicht in den Block passt (ausblenden oder zuschneiden und Auslassungspunkte hinzufügen)
- Deckkraft – Elementtransparenz auswählen
Nachdem wir nun die verfügbaren Stile verstanden haben, können wir mit dem Entwerfen beginnen. Dazu werden wir die folgenden Stile hinzufügen:
::-webkit-input-placeholder ( Farbe: #2cb04d; )
::-moz-placeholder ( color: #2cb04d; )/* Firefox 19+ */
:-moz-placeholder ( Farbe: #2cb04d; ) /*Firefox 18- */
:-ms-input-placeholder ( Farbe: #2cb04d; )
Nach dem Hinzufügen dieser Zeilen ändert sich die Farbe der Namen in den Formularfeldern und ist in jedem Browser gleich. Hier können Sie weitere Stile hinzufügen.
Zum Beispiel dieser Stil
::-webkit-input-placeholder (Farbe: #2cb04d; Schriftgröße: 1,5em; Schriftstärke: 600;)
::-moz-placeholder (color:#2cb04d; Schriftgröße:1,5em; Schriftstärke:600;) /*Firefox 19+*/
:-moz-placeholder (Farbe:#2cb04d; Schriftgröße:1,5em; Schriftstärke:600;) /*Firefox 18-*/
:-ms-input-placeholder (Farbe: #2cb04d; Schriftgröße: 1,5em; Schriftgröße: 600;)
Fügen Sie farbigen, großen und mittelfetten Text hinzu. Wenn Sie hinzufügen zusätzliches Eigentum —
text-overflow:ellipsis, dann wird der Text so zugeschnitten, dass er in das Feld passt, und am Ende werden Auslassungspunkte hinzugefügt.
Es gibt noch eine weitere interessante Eigenschaft: Dank der Darstellung von Animationen in CSS (Stilen) können Sie ein schönes Ausblenden konfigurieren, wenn Sie den Cursor in ein Feld setzen. Bisher wurde dies mithilfe von js (Skripten) durchgeführt.
Input::-webkit-input-placeholder (Deckkraft: 1; Übergang: Deckkraft 0,3 Sekunden;)
.input::-moz-placeholder (Deckkraft: 1; Übergang: Deckkraft 0,3 Sekunden;)
.input:-moz-placeholder (Deckkraft: 1; Übergang: Deckkraft 0,3 Sekunden;)
.input:-ms-input-placeholder (Deckkraft: 1; Übergang: Deckkraft 0,3 Sekunden;)
.input:focus::-webkit-input-placeholder (Deckkraft: 0; Übergang: Deckkraft 0,3 Sekunden;)
.input:focus::-moz-placeholder (Deckkraft: 0; Übergang: Deckkraft 0,3 Sekunden;)
.input:focus:-moz-placeholder (Deckkraft: 0; Übergang: Deckkraft 0,3 Sekunden;)
.input:focus:-ms-input-placeholder (Deckkraft: 0; Übergang: Deckkraft 0,3 Sekunden;)
Durch das Hinzufügen solcher Stile wird der Platzhalter sanft ausgeblendet, wenn der Cursor im Feld platziert wird
.input ist die Formularelementklasse. Damit Stile funktionieren, sollte der Formularfeldcode wie folgt aussehen:
Oder Sie können die Elementklasse verwenden. Auf diese Weise können Sie für jedes Formular unterschiedliche Stile festlegen.
.contacts-form form input::-webkit-input-placeholder (Farbe: #2cb04d; Schriftgröße: 1,5 em; Schriftstärke: 600;)
.contacts-form Formulareingabe::-moz-placeholder (Farbe: #2cb04d; Schriftgröße: 1,5 em; Schriftstärke: 600;)/*Firefox 19+*/
.contacts-form Formulareingabe:-moz-placeholder (Farbe: #2cb04d; Schriftgröße: 1,5em; Schriftstärke: 600;)/*Firefox 18-*/
.contacts-form form input:-ms-input-placeholder (Farbe: #2cb04d; Schriftgröße: 1,5 em; Schriftgröße: 600;)
Auf diese einfache Weise können Sie ein wirklich schönes Formulardesign erstellen.
Typischerweise wird das Platzhalterattribut für Eingabe und Textbereich verwendet, um innerhalb dieser Elemente einen Aufruf zum Handeln bereitzustellen. In diesem Beitrag beschreibe ich verschiedene Optionen zum Gestalten des Textes von Platzhaltern sowie Optionen für deren Animation
So kann die Textfarbe unseres Platzhalters beispielsweise mithilfe der folgenden CSS-Regeln geändert werden:
::-webkit-input-placeholder ( color : #c0392b ;) ::-moz-placeholder ( color : #c0392b ;) /* Firefox 19+ */ :-moz-placeholder ( color : #c0392b ;) /* Firefox 18- */ :-ms-input-placeholder ( Farbe : #c0392b ;)
Die Länge des Codes für die Formatierung einer so einfachen Eigenschaft ist auf das Fehlen eines gemeinsamen Standards zurückzuführen. Daher hat jeder Browser die Unterstützung für die Platzhaltergestaltung auf seine eigene Weise implementiert.
Außerdem werden nicht alle unterstützt CSS-Eigenschaften. Hier ist eine Liste der genau unterstützten Eigenschaften:
Schriftart (und verwandte)
Hintergrund (und verwandte)
Farbe
Wortabstände
Buchstabenabstand
Textdekoration
vertikal ausrichten
Texttransformation
Zeilenhöhe
Texteinzug
Textüberlauf
Opazität
Es kommt auch vor, dass der Platzhaltertext über die Breite des Eingabe- oder Textbereichselements hinaus „ausreicht“ (ein häufiger Fall für mobile Geräte). Gleichzeitig werden unschöne Stellen automatisch abgeschnitten.
Eine CSS-Eigenschaft wie text-overflow: ellipsis hilft uns, dieses Problem zu beheben, indem dem beschnittenen Bereich des Platzhalters eine ästhetische Ellipse hinzugefügt wird. In Stilen schreiben wir so:
Eingabe [Platzhalter] (Textüberlauf: Auslassungspunkte;) Eingabe ::-moz-Platzhalter (Textüberlauf: Auslassungspunkte;) Eingabe:-moz-Platzhalter (Textüberlauf: Auslassungspunkte;) Eingabe:-ms-input-Platzhalter ( Textüberlauf: Auslassungspunkte ;)
Um unseren Platzhaltern noch mehr Ästhetik zu verleihen, ist es möglich, den Effekt hinzuzufügen, dass sie ausgeblendet werden, wenn das entsprechende Element den Fokus erhält.
Einige Beispiele für ein solches Verstecken mit Animationselementen:
/* Sanfte Änderung der Platzhaltertransparenz beim Fokussieren */.input ::-webkit-input-placeholder ( Deckkraft: 1; Übergang: Deckkraft 0,3 Sekunden Leichtigkeit ;) .input ::-moz-placeholder ( Deckkraft: 1; Übergang: Deckkraft 0,3 Sekunden Leichtigkeit ;).input :-moz- Platzhalter (Deckkraft: 1; Übergang: Deckkraft 0,3 Sekunden Leichtigkeit;).input:-ms-input-placeholder (Deckkraft: 1; Übergang: Deckkraft 0,3 Sekunden Leichtigkeit;).input (Deckkraft: 0; Übergang: Deckkraft 0,3 Sekunden Leichtigkeit; ) .input :focus::-moz-placeholder ( Deckkraft : 0 ; Übergang : Deckkraft 0,3 Sekunden Leichtigkeit ;).input :focus:-moz-placeholder ( Deckkraft : 0 ; Übergang : Deckkraft 0,3 Sekunden Leichtigkeit ;).input :focus :-ms-input-placeholder (Deckkraft: 0; Übergang: Deckkraft 0,3 Sekunden;) /* verschiebt den Platzhalter nach rechts, wenn er fokussiert ist */.input ::-webkit-input-placeholder ( text-indent : 0px ; Übergang : text-indent 0,3s Leichtigkeit ;) .input ::-moz-placeholder ( text-indent : 0px ; Übergang : text-indent 0,3s Leichtigkeit ;).input :-moz-placeholder ( text-indent : 0px ; Übergang : text-indent 0,3s Leichtigkeit ;).input :-ms-input-placeholder ( text-indent : 0px ; Transition : text-indent 0,3s Leichtigkeit ;).Eingang :focus::-webkit-input-placeholder( text-indent: 500px; Übergang: text-indent 0,3 Sekunden Leichtigkeit;).input:focus::-moz-placeholder (text-indent: 500px; Übergang: text-indent 0,3s Leichtigkeit;).input:focus:- moz-placeholder (text-indent: 500px; Übergang: text-indent 0,3 s Leichtigkeit;) .input:focus:-ms-input-placeholder (text-indent: 500px; Übergang: text-indent 0,3 s Leichtigkeit ;) /* verschiebt den Platzhalter nach unten, wenn er fokussiert ist */.input ::-webkit-input-placeholder ( Zeilenhöhe: 20 Pixel; Übergang: Zeilenhöhe 0,5 Sekunden;) .input ::-moz-placeholder ( Zeilenhöhe: 20 Pixel; Übergang: Zeilenhöhe 0,5 Sekunden ;).input :-moz-placeholder ( line-height : 20px ; Übergang : line-height 0,5 s Leichtigkeit ;).input :-ms-input-placeholder ( line-height : 20px ; Übergang : line-height 0,5 s Leichtigkeit ;).Eingang :focus::-webkit-input-placeholder( line-height: 100px; Übergang: line-height 0,5s Leichtigkeit;).input:focus::-moz-placeholder (line-height: 100px; Übergang: line-height 0,5s Leichtigkeit;).input:focus:- moz-Platzhalter (Zeilenhöhe: 100 Pixel; Übergang: Zeilenhöhe 0,5 Sekunden Leichtigkeit;).input: Fokus: -ms-input-Platzhalter (Zeilenhöhe: 100 Pixel; Übergang: Zeilenhöhe 0,5 Sekunden Leichtigkeit;)
Lassen Sie uns hier fertig werden.
Platzhalter ist ein Element eines Eingabefeldes, in dem ein Tooltip platziert werden kann. Wenn der Benutzer mit der Dateneingabe beginnt, verschwindet der unterstützende Text, um ihn nicht zu stören. Jeder Browser hat seine eigene Meinung darüber, wie dieses Element angezeigt werden soll, und manchmal beeinträchtigen Standardstile das gesamte Design. Um sie zu verwalten, müssen Sie eine spezielle CSS-Platzhalterregel verwenden.
Wo ist der Platzhalter?
Das Problem besteht darin, dass der Tooltip des Eingabefelds sicher im Schatten-DOM versteckt ist und nicht so leicht zu erreichen ist. Hierzu wird ein spezieller, nicht standardmäßiger ::Platzhalter verwendet. Mit seiner Hilfe können Sie die Eigenschaften des Tooltips verwalten.
Die Gestaltung eines Platzhalters in CSS sieht folgendermaßen aus:
Input::placeholder ( Farbe: rot; Deckkraft: 1; Schriftstil: kursiv; )
Browserunterstützung
Das CSS-Platzhalter-Pseudoelement wird von allen gut gehandhabt moderne Browser, und um ältere Browser zu unterstützen, können Sie die Präfixe verwenden:
- ::-webkit-input-placeholder – für Webkit-Browser (Safari, Chrome, Opera);
- ::-moz-placeholder – für Firefox-Browser obige Version 19;
- :-moz-placeholder – für älteres Firefox;
- :-ms-input-placeholder – für Internet Explorerüber Version 10.
Wie Sie sehen, alt Mozilla-Browser sowie IE betrachten Platzhalter als CSS-Pseudoklasse und nicht als Pseudoelement. Lassen Sie uns nicht mit ihnen streiten, wir werden diesen Aspekt nur bei der Gestaltung des Eingabefelds berücksichtigen.
Styling-Optionen
Sie können die folgenden Optionen für das Platzhalter-Pseudoelement in CSS festlegen:
- Hintergrund – die Tooltip-Blockgruppe gilt für das gesamte Eingabefeld. Sie können nicht nur die Farbe (Hintergrundfarbe), sondern auch das Bild (Hintergrundbild) festlegen.
- Textfarbe - Farbe;
- Transparenz – Opazität;
- Unterstreichen, Überstreichen oder Streichen – Textdekoration;
- case - Texttransformation;
- interne Einzüge - Polsterung. Nicht von allen Browsern unterstützt. Wie bei Inline-Elementen wird der obere und untere Abstand ignoriert.
- Schriftartenanzeige – Eigenschaften der Schriftartengruppe, Zeilenhöhe und verschiedene Einzüge (Texteinzug, Buchstabenabstand, Wortabstand);
- vertikale Ausrichtung in einer Linie - vertikal ausrichten;
- Text abschneiden, wenn der Container überläuft – Textüberlauf.
Im Fokus
Standardmäßig verschwindet der Tooltip nur dann aus dem Eingabefeld, wenn mindestens ein Zeichen darin eingegeben wird. Mit Platzhaltern können Sie das Verschwinden jedoch sofort umsetzen, wenn Sie sich auf das Feld konzentrieren. Dazu müssen Sie es mit der Pseudoklasse:focus kombinieren.
Eingabe:Fokus::Platzhalter (Farbe: transparent;)
In einigen Browsern ist es möglich, Änderungen in einer Reihe von Platzhaltereigenschaften mithilfe der Transition-Anweisung zu animieren.
Eingabe::Platzhalter (Farbe: Schwarz; Übergang: Farbe 1s;) Eingabe:Fokus::Platzhalter (Farbe: Weiß;)
Im Browser Google Chrome Wenn Sie sich auf ein solches Feld konzentrieren, ändert sich die Farbe des Hinweises innerhalb einer Sekunde sanft.
Platzhalter ist ein Element eines Eingabefeldes, in dem ein Tooltip platziert werden kann. Wenn der Benutzer mit der Dateneingabe beginnt, verschwindet der unterstützende Text, um ihn nicht zu stören. Jeder Browser hat seine eigene Meinung darüber, wie dieses Element angezeigt werden soll, und manchmal beeinträchtigen Standardstile das gesamte Design. Um sie zu verwalten, müssen Sie eine spezielle CSS-Platzhalterregel verwenden.
Wo ist der Platzhalter?
Das Problem besteht darin, dass der Tooltip des Eingabefelds sicher im Schatten-DOM versteckt ist und nicht so leicht zu erreichen ist. Dazu wird ein spezielles, nicht standardmäßiges CSS::placeholder-Pseudoelement verwendet. Mit seiner Hilfe können Sie die Eigenschaften des Tooltips verwalten.
Sie werden interessiert sein:
Die Gestaltung eines Platzhalters in CSS sieht folgendermaßen aus:
input::placeholder ( Farbe: rot; Deckkraft: 1; Schriftstil: kursiv; ) 
Browserunterstützung
Das CSS-Platzhalter-Pseudoelement wird von allen modernen Browsern gut verarbeitet. Zur Unterstützung älterer Browser können Sie die folgenden Präfixe verwenden:
- ::-webkit-input-placeholder – für Webkit-Browser (Safari, Chrome, Opera);
- ::-moz-placeholder – für Firefox-Browser über Version 19;
- :-moz-placeholder – für älteres Firefox;
- :-ms-input-placeholder – für Internet Explorer über Version 10.
Wie Sie sehen, betrachten ältere Mozilla-Browser sowie der IE Platzhalter als CSS-Pseudoklasse und nicht als Pseudoelement. Lassen Sie uns nicht mit ihnen streiten, wir werden diesen Aspekt nur bei der Gestaltung des Eingabefelds berücksichtigen.
Styling-Optionen
Sie können die folgenden Optionen für das Platzhalter-Pseudoelement in CSS festlegen:
- Hintergrund – Gruppe von Hintergrundeigenschaften. Der Hintergrund des Hinweisblocks erstreckt sich über das gesamte Eingabefeld. Sie können nicht nur die Farbe (Hintergrundfarbe), sondern auch das Bild (Hintergrundbild) festlegen.
- Textfarbe - Farbe;
- Transparenz – Opazität;
- Unterstreichen, Überstreichen oder Streichen – Textdekoration;
- case - Texttransformation;
- interne Einzüge - Polsterung. Nicht von allen Browsern unterstützt. Wie bei Inline-Elementen wird der obere und untere Abstand ignoriert.
- Schriftartenanzeige – Eigenschaften der Schriftartengruppe, Zeilenhöhe und verschiedene Einzüge (Texteinzug, Buchstabenabstand, Wortabstand);
- vertikale Ausrichtung in einer Linie - vertikal ausrichten;
- Text abschneiden, wenn der Container überläuft – Textüberlauf.
Eingabe1::Platzhalter (Hintergrundbild: linearer Farbverlauf (Limette, Blau); Farbe: Weiß;) .input2::Platzhalter (Textdekoration: durchgestrichen; Farbe: lila; Schriftstärke: fett;) .input3 ::placeholder ( Schriftgröße: 16px; Buchstabenabstand: 10px; ) .input4::placeholder ( Hintergrund: braun; Farbe: weiß; Textüberlauf: Auslassungspunkte; )
Im Fokus
Standardmäßig verschwindet der Tooltip nur dann aus dem Eingabefeld, wenn mindestens ein Zeichen darin eingegeben wird. Aber das CSS-Platzhalter-Pseudoelement ermöglicht es Ihnen, das Ausblenden sofort zu implementieren, wenn Sie sich auf das Feld konzentrieren. Dazu müssen Sie es mit der Pseudoklasse:focus kombinieren.
input:focus::placeholder ( Farbe: transparent; )
In einigen Browsern ist es möglich, Änderungen in einer Reihe von Platzhaltereigenschaften mithilfe der Transition-Anweisung zu animieren.
Eingabe::Platzhalter (Farbe: Schwarz; Übergang: Farbe 1s;) Eingabe:Fokus::Platzhalter (Farbe: Weiß;)
IN Google-Browser Wenn Sie sich auf ein solches Feld konzentrieren, ändert sich die Farbe der Chrome-Tooltips innerhalb einer Sekunde.