ATOZ CSS Schneller Tipp: Platzhaltertext

Dieser Artikel ist Teil der ATOZ CSS -Serie. Hier finden Sie andere Einträge für die Serie. Sie können die vollständigen Text und Screenshots seiner entsprechenden Video-Pseudo-Elemente anzeigen.

Willkommen in unserer Atoz CSS -Serie! In dieser Serie werde ich verschiedene CSS -Werte (und Eigenschaften) untersuchen, die mit verschiedenen Buchstaben im Alphabet beginnen. Wir wissen, dass manchmal Screenshots nicht genug sind. In diesem Artikel haben wir einen neuen Tipp zum Style -Platzhaltertext hinzugefügt.

p steht für Platzhaltertext

Pseudo-Elemente :before und :after sind ideal, um komplexe Designmerkmale zu erstellen, ohne Markups mit nicht-semantischen Elementen durcheinander zu bringen. Andere Pseudoelemente, wie :first-line und :first-letter, ermöglichen es uns, in HTML-Dokumenten auf den Stil nicht markierter Elemente zuzugreifen.

Wir haben uns viele davon im Pseudo-Element-Screenshot angesehen, aber ein Pseudoelement, den wir uns nicht angesehen haben, war der Stil des Platzhaltertextes. Lassen Sie uns dieses Problem lösen.

Eingaberichtehalter

auswählen

Stellen wir uns zunächst die folgende HTML vor:

<input class="name-field" type="text" placeholder="Enter your name">

Wir können die Farbe des Eingangstextes auf rot einstellen, wie unten gezeigt:

.name-field {
  color: red;
}

Wir können auch den Eingabestil nach seinen Platzhalterattributen auswählen und festlegen:

input[placeholder="Enter your name"] {
  color: red;
}

, aber dies stymt immer noch jeden im Feld Eingabegländer eingegebenen Benutzereingang , anstatt das Erscheinungsbild des Platzhaltertextes selbst festzulegen. Dazu benötigen wir eine Reihe von Anbieter-Präfix-Selektoren für Pseudoelemente für Platzhalter.

::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {/*Firefox 18-*/
  color: red;  
}
::-moz-placeholder {/*Firefox 19+*/
  color: red;  
}
:-ms-input-placeholder {  
  color: red;  
}

Dies sieht nach einer Wiederholung aus, aber leider gibt es keinen kurzen (nicht wiederholenden) Weg, dies zu tun.

Die folgende Methode ist ungültig:

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
  color: red;  
}

Dies liegt daran, dass jeder Browser in der Lage sein muss, jeden Selektor in der von Kommas getrennten Serie zu "verstehen", um die Stile innerhalb der Klammern anzuwenden.

Platzhalterstil mit Sass

festlegen

Eine Möglichkeit, dieses doppelte CSS zu lösen, besteht darin, SASS -Hybrid -Makros zu verwenden. Das verwende ich in 99% der Projekte:

@mixin input-placeholder {
  ::-webkit-input-placeholder {
    @content;
  }
  :-moz-placeholder {/* Firefox 18- */
    @content;
  }
  ::-moz-placeholder {/* Firefox 19+ */
    @content;
  }
  :-ms-input-placeholder {  
    @content;
  }
}

/* usage */

@include input-placeholder {
  color: red;
}

Dies ermöglicht es mir, Platzhalter in allen Browsern mithilfe eines einzelnen Sass

zu stylen, wodurch der Code kürzer und leichter zu warten ist. @include

achten Sie auf die Spezifität beim Festlegen des Platzhalterstils

Im IE -Browser kann das Einstellen des eingegebenen Stils die für Platzhaltertext festgelegten Stile überschreiben.

:-ms-input-placeholder {
  color: red;
}
input[type="text"] { 
  color: blue; /* 占位符文本在 IE 中将为蓝色 */
}

Stellen Sie sicher, dass IE -Platzhalterstile eine höhere Spezifität haben, damit sie wie erwartet erscheinen. Dies kann sogar in der Verwendung von

verwendet werden, aber seien Sie vorsichtig, wenn Sie dieses leistungsstarke Tool verwenden. !important

achten Sie auf die Opazität der Platzhalter

In Firefox beträgt die Standard -Deckkraft des Platzhaltertextes etwa 0,5, so opacity: 1 color: red Selbst wenn Sie Normalize.css verwenden, wird dieses Element für Sie nicht zurückgesetzt. Wenn vollständig undurchsichtige Platzhalter für Ihr Projekt von entscheidender Bedeutung sind, denken Sie an diesen Tipp!

FAQs über CSS -Platzhaltertext (FAQ)

Wie kann man die Farbe des Platzhaltertextes in CSS ändern?

Die Farbe des Platzhaltertextes in CSS kann durch die Verwendung des

-Pseudoelements geändert werden. Mit diesem Pseudoelement können Sie Platzhaltertext in Eingabe- oder Textbereichselementen stylen. Hier ist ein Beispiel dafür, wie man die Farbe in Rot ändert:

::placeholder

Denken Sie daran, dass die Browserkompatibilität wichtig ist. Verwenden Sie für Firefox

<input class="name-field" type="text" placeholder="Enter your name">

;

::-moz-placeholder Kann ich die Schriftgröße des Platzhaltertextes ändern? :-ms-input-placeholder ::-webkit-input-placeholder Ja, Sie können die Schriftgröße des Platzhaltertextes ändern. Genau wie die Farbe können Sie die

pseudoelement verwenden, um die Schriftgröße zu ändern. Hier ist ein Beispiel:

Dies ändert die Schriftgröße des Platzhaltertextes auf 18px. ::placeholder

Ist es möglich, den Schriftart des Platzhaltertextes zu ändern?

.name-field {
  color: red;
}

Absolut können Sie den Schriftart des Platzhaltertextes ändern. Sie können es in Kursivschrift, mutig oder in jedem anderen gewünschten Stil schaffen. Hier ist ein Beispiel dafür, wie man es kursiv macht:

Dies ändert den Schriftart des Platzhaltertextes in eine Kursivschrift.

Kann ich die Deckkraft des Platzhaltertextes ändern?

input[placeholder="Enter your name"] {
  color: red;
}

Ja, Sie können die Opazität des Platzhaltertextes ändern. Dies kann durch die Verwendung des

-attributs in CSS erfolgen. Hier ist ein Beispiel:

Dies ändert die Opazität des Platzhaltertextes auf 0,5 und macht es durchscheinend. opacity

Wie füge ich dem Platzhaltertext Hintergrundfarbe hinzu?

::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {/*Firefox 18-*/
  color: red;  
}
::-moz-placeholder {/*Firefox 19+*/
  color: red;  
}
:-ms-input-placeholder {  
  color: red;  
}

Leider können Sie dem Platzhaltertext keine Hintergrundfarbe hinzufügen.

Pseudo-Elemente können Sie nur die Farbe, die Schriftgröße, den Schriftart und die Opazität des Platzhaltertextes festlegen. Es unterstützt keine anderen Attribute wie

.

Kann ich CSS -Animation über Platzhaltertext verwenden? ::placeholder background-color Nein, Sie können keine CSS -Animation im Platzhaltertext verwenden.

Pseudo-Elemente unterstützen keine CSS-Animationen oder -übergänge.

Ist es möglich, verschiedene Platzhalterstile auf unterschiedliche Weise festzulegen?

::placeholder Ja, Sie können verschiedene Platzhalterstile auf unterschiedliche Weise festlegen. Sie müssen nur eine andere Klasse oder ID für jedes Eingabe- oder Textbereichselement verwenden. Hier ist ein Beispiel:

Dies macht den Platzhaltertext in der Eingabe mit der Klasse "input1" rot und der Platzhaltertext in der Eingabe mit der Klasse "input2" blau.

Kann ich Pseudoklassen mit ::placeholder verwenden?

Nein, Sie können keine Pseudoklassen wie :hover, :active oder :focus mit ::placeholder verwenden. ::placeholder Pseudo-Elemente unterstützen keine Pseudoklassen.

Ist es möglich, den Platzhaltertext mit CSS zu ändern?

Nein, Sie können den Platzhaltertext nicht mit CSS ändern. Der Inhalt des Platzhaltertextes kann nur mit HTML geändert werden.

Kann ich Medienabfragen in ::placeholder verwenden?

Ja, Sie können Medienabfragen in ::placeholder verwenden. Auf diese Weise können Sie den Platzhaltertext je nach Bildschirmgröße oder Gerät auf unterschiedliche Weise stylen. Hier ist ein Beispiel:

<input class="name-field" type="text" placeholder="Enter your name">

Dies ändert die Farbe des Platzhaltertextes auf dem Bildschirm mit einer Bildschirmbreite von 600px oder kleiner bis rot.

Das obige ist der detaillierte Inhalt vonATOZ CSS Schneller Tipp: Platzhaltertext. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!