W-lan
Linux.
Windows
Verschiedenes
Netzwerk
Smart TV.
Lösungen

So ändern Sie die Farbe des Text-Tipps in Platzhalter mit CSS-Styles

Wenn Sie mit dem Attribut Platzhalter nicht vertraut sind, klären wir ein wenig, was er ist und wo es verwendet wird. Es wird in den Feldeingabefeldern verwendet. Das Attribut zeigt die Inschrift im Eingabefeld an, indem er die Rolle eines gewissen Tipps darstellt. Früher auf unserer Seite gab es ein Beispiel mit verwenden von JavaScript, positive Seite diese Methode Dies ist Kreuzbrowser. Nun sprechen wir uns über die Stilisierung des Platzhalter-Attributs, das in Ein- und TextArtarea-Elementen verwendet wird.
Eingabefeldcode in unserem Beispiel wird so etwas aussehen:

Am Ausgang erhalten wir ein solches Feld:

Lassen Sie uns vorstellen, dass wir Platzhalter stilisieren müssen, denn dies sollten wir eine Reihe von Regeln in CSS registrieren:

:: - Webkit-Input-Placeholder (Farbe: # C1c1c1;) :: - Moz-Placeholder (Farbe: # C1C1C1;) / * Firefox 19+ * /: -Moz-Platzhalter (Farbe: # C1c1c1;) / * Firefox 18- * /: -MS-Input-Placeholder (Farbe: # C1c1c1;)

Wir bekommen:

Wir können nicht alle Eigenschaften ändern, aber die Liste der meisten von modernen Browsern wird unten angezeigt:
schriftart (auch verwandte Eigenschaften)
hintergrund. (auch verwandte Eigenschaften)
farbe
wortabstand
buchstaben-Abstand
textdekoration.
vertikal ausgerichtet
text-Transformation
zeilenhöhe
texteinzug
textüberlauf.
opazität

IM verschiedene Browser Die Regel ist auf verschiedene Weise geschrieben, weil Es gibt keinen einzigen Standard, dieser Satz von Datensätzen ist weiterhin relevant. In dem IE-Browser sowie Firefox unterhalb der 18 Version des Platzhalters wird als Pseudoklasse als Pseudoklasse wahrgenommen, und in den neuen Firefox-Browsern wird Webkit und Blink als Pseudo-Element wahrgenommen.

Verringerung des Textes in Platzhalter
Manchmal können Spitzen so lange sein, dass sie nicht vollständig in das Eingabefeld passen können. Für diese Zwecke können Sie auch zusätzliche Eigenschaften verwenden, die den Textplatzhalter in dem Eingabefeld reduzieren.

Input (Textüberlauf: Ellipsis;) Input :: - Moz-Placeholder (Textüberlauf: Ellipsis;) Input: -Moz-Platzhalter (Textüberlauf: ellipsis;) Eingabe: -MMs-Input-Placeholder (Textüberlauf) : Ellipsis;)

Infolgedessen erhalten wir das Eingabefeld mit dem Platzhalter dieses Typs:

Blenden Sie den Text aus, wenn Sie auf das Feld klicken
Standardmäßig interpretiert jeder Browser den Platzhalter-eine Antwort auf seine Weise. In einigen Browsern versteckt er sich sofort, wenn Sie auf das Feld klicken, in den anderen in der Anwesenheit von mindestens einem Zeichen im Eingabefeld verborgen. Lassen Sie uns den Text verstecken, wenn Sie auf das Feld klicken, in allen Browsern gleichermaßen ist.

: FOCUS :: - WebKit-Input-Placeholder (Farbe: transparent;): Fokus :: - Moz-Placeholder (Farbe: transparent;): Fokus: -Moz-Platzhalter (Farbe: transparent;): Fokus: -MMS-INPUT -Plasinhalter (Farbe: transparent;)

Wir erhalten solche Aktionen:

Pseudo-Element :: Platzhalterfarbe (in einigen Fällen die Pseudoklasse) Ermöglicht das Einstellen von Text, der das Formularelement füllt. Es wird mit dem Attribut Platzhalter installiert: .

Dieser Text kann für die meisten modernen Browser mit speziellen Präfixen stilisiert werden:

:: - Webkit-Input-Placeholder (/ * Chrom / Opera / Safari * / Farbe: Rosa;) :: - Moz-Placeholder (/ * Firefox 19+ * / Farbe: Rosa;): -Ms-Input-Placeholder ( / * IE 10+ * / Farbe: Rosa;): -Moz-Platzhalter (/ * Firefox 18- * / Farbe: Rosa;)

WARNUNG: Es ist eine nicht standardmäßige Syntax, und seltsame Namen sind damit verbunden. : Platzhalter-gezeigt, ist ein Standard, und selbst die Autoren der Spezifikation danken wahrscheinlich, dass :: Platzhalter standardisiert ist.

Wie bei einem Pseudo-Element kann er wie folgt auf bestimmte Elemente angewendet werden:

input.big-dog :: - Webkit-Input-Placeholder (Farbe: Orange;)

Sichtbeispiel

Unterschied zwischen: Platzhalter-gezeigt und :: Platzhalter

: Platzhalter-gezeigt ist, um das Eingabeformular hervorzuheben, und die CSS-Platzhalterfarbe ist für die Stilisierung des Textes verantwortlich.

Schauen Sie sich das Diagramm an:

Es stellte sich heraus, dass viele es verwirrt, und ich sehe oft die Spezifikation, wo es gibt: Platzhalter-gezeigt, aber nicht :: Platzhalter.

Es sei darauf hingewiesen, dass: Platzhalter-gezeigt, der die Stilisierung des Textes beeinflussen kann, da es ein Elternelement für ihn ist ( zum Beispiel können Sie die Schriftgröße ändern).

Bitte beachten Sie :: Platzhalter-gezeigt - Pseudo-Klasse ( element im konkreten Zustand), A :: Platzhalter ist ein Pseudo-Element ( sichtbarer Teil, der nicht im Dom ist). Sie unterscheiden sich in Single- und Milchzitaten.

Da: Platzhalter-gezeigt ist, ist ein Pseudoclass, dann muss es ein vorhandenes Element zuordnen. Und weist daher das Eingabeformular zu, wenn der Text im Formularelement angezeigt wird. Pseudo-Element :: Platzhalter wickelt den Text des Steckers selbst.

Element oder Klasse?

In diesem Plan ist die Input-Platzhalterfarbe nicht standardisiert. Das bedeutet, dass jeder Browser sein Verständnis dafür hat, wie es funktionieren soll.

Anfangs wurde diese Pseudoklasse in eingeleitet browser Firefox. . Diese Pseudoklasse gibt dem Manöver nicht so viel Platz. Wenn Sie beispielsweise die Farbe des Texts ändern möchten, wenn Sie das Eingabeformular auswählen, müssen Sie den Eingabetyp-Selektor verwenden: Fokus :: Platzhalter. Und die Pseudoclass erlaubt es nicht zu tun.

IE10 unterstützt diese Funktionalität als Pseudoklassen und kein Artikel. In allen anderen Browsern wird er als Pseudo-Element angesehen.

Farbstecker in Firefox

Sie haben bemerkt, dass die Farbe der Stecker im Vergleich zu anderen Browsern mehr schwach aussieht. In dem Bild unten ist die Linke Firefox 43 und rechts - Chrom 47 gezeigt:


Dies liegt daran, dass standardmäßig alle "Stecker" in Firefox einen zusätzlichen Transparenzwert erhalten. Um diesen Effekt loszuwerden, benötigen wir folgende Codezeile:

:: - Moz-Placeholder (Deckkraft: 1;)

Versuchen Sie, diese Demo im Firefox-Browser zu öffnen.

Stilstütze

Pseudo-Element unterstützt die folgenden Eigenschaften:

  • schrifteigenschaften;
  • farbe;
  • hintergrundeigenschaften;
  • wortabstand;
  • buchstaben-Abstand;
  • textdekoration;
  • vertikal ausgerichtet;
  • text-Transformation;
  • zeilenhöhe;
  • texteinzug;
  • oPAZITÄT;

Zusätzliche Ressourcen

MDN-Dokumentation.
Dh Dokumentation.
Einsatzartikel Blog TreeHouse


Viele von Ihnen hatten oft Formen, in denen es sich um Unterschriften gibt. Sie verschwinden, wenn sie eingeben. Dies ist also das Attribut Platzhalter, das die Elemente erstellt werden, die zum Eingeben des Textes (Input) erstellt werden. Verwenden Sie es, Sie können den Text angeben, der als Hinweis angezeigt wird, bevor Sie in dieses Feld eingeben. Leider arbeiten nicht alle Browser gleichermaßen korrekt mit diesem Attribut. Veraltete Versionen und dieser Text wird nicht angezeigt.

Berücksichtigen Sie nun, wie man es ermöglicht, die unten beschriebenen Probleme zu lösen:

1. Wie man Stile für den Spielerhodern wechselt;
2. So verbergen Sie den Text des Spielehändlers nicht, wenn Sie eingeben, aber bereits das Feld drücken.
3. Was Sie mit Browsern tun sollen, wobei Platzhalter grundsätzlich nicht angezeigt wird.

In allen Beispielen arbeiten wir mit dem Eingabefeld.

Wie kann man die Text-Tipp-Farbe in Platzhalter in der Eingabe ändern?

Für lange Zeit ist keine Nachricht, dass jeder Browser nicht nur Platzhalter auf unterschiedliche Weise anzeigt, sondern auch spezielle Eigenschaften erfordert, um Stile zu ändern. Und ich spreche nicht von den entsprechenden Präfixen schriftlich. Lass uns sie ansehen.

Standardmäßig ist in vielen Browsern die Farbe der Spitze grau. IM dieses Beispiel Lass es uns schwarz machen.

Die Deckkrafteigentümer, die für Transparenz verantwortlich ist, muss für diese Browsern eingegeben werden, in denen Transparenz für diesen Artikel unterstützt wird. Andernfalls ist die Farbe grau sowie standardmäßig.

Ja, Sie können diese Klasseneigenschaften angeben. Wir sehen unten an:

Eingabethema :: - Webkit-Input-Placeholder (Farbe: rot;)
.input-Text :: - WebKit-Input-Placeholder (Farbe: Grün;)
/* usw... */

Entfernen Sie Platzhalter, wenn Sie auf das Feld klicken

Standardmäßig verschwindet in den Browsern der Text aus dem Attribut des Platzhalters erst nach Beginn der Eingabe, es gibt jedoch auch diejenigen, die diesen Text durch Drücken des Eingabefelds ablenken möchten. Meistens tun dies das. Dafür müssen Sie Stile für den Fokus schreiben, wo die Farbe des Texttipps vollständig transparent ist, dh es wird aufhören, sichtbar zu sein.

: FOCUS :: - Webkit-Input-Placeholder (Deckkraft: 0;) / * webkit * /
: FOCUS :: - Moz-Placeholder (Deckkraft: 0;) / * Firefox 19+ * /
: Fokus: -Moz-Platzhalter (Deckkraft: 0;) / * Firefox 18- * /
: Fokus: -MS-Input-Placeholder (Deckkraft: 0;) / * dh * /

Sie können sogar eine reibungslose Änderung der Transparenz oder der Änderung der Farbe der CSS-Animation konfigurieren. Mit einem Cross-Browser können solche Lösungen jedoch auftreten.

Und was ist mit Brakes zu tun, die das Attribut des Platzhalters nicht in der Eingabe unterstützen?

Nun, nicht genau verloren gehen) Ja, tatsächlich gibt es solche Browser. Zum Beispiel, IE8. Und ja, es gibt Leute-Adepten, die es immer benutzen werden. Wenn Sie eine Lösung für alle Besucher erstellen müssen, nehmen Sie weitere Geduld ein.

Laden Sie das jQuery-Plugin dazu, dieses Problem zu lösen, laden Sie dazu das JQuery-Plugin für diesen JQuery herunter. Ich werde keine Links geben, denn heute werden sie sich morgen ändern. Wenn Sie jedoch ein Arbeitsbeispiel mit einem Plugin in - Downloadquelle herunterladen können.

Verbinden Sie es. Vergessen Sie nicht, was auch im Prinzip benötigt wird, jQuery Connect.


Das PlaceHolder-Attribut wird verwendet, um Anweisungen in leeren Eingabefeldern zu erstellen (Tags und