Detaillierte grafische Erläuterung zur Verwendung des Platzhalterattributs und zur Änderung des Standardstils des Platzhalters

Eingabefelder werden häufig während des Seitenlayouts verwendet, um den Benutzer zur Eingabe korrekter Informationen aufzufordern. Manchmal muss das Platzhalterattribut zur Erläuterung verwendet werden. In diesem Artikel erfahren Sie, wie Sie das Platzhalterattribut verwenden und wie Sie den Stil des Platzhalterattributs ändern. Ich hoffe, dass es für Sie hilfreich ist.

Platzhalter ist ein neues Attribut in HTML5. Platzhalter können verwendet werden, um den erwarteten Wert des Eingabefelds einer kurzen Nachricht zu beschreiben. Die Eingabeaufforderung wird angezeigt, bevor der Benutzer den Wert eingibt, und verschwindet, sobald der Benutzer den Wert eingibt. Beispiel: Wenn wir uns anmelden, müssen wir einen Benutzernamen und ein Passwort eingeben. Sie werden gefragt, wo Sie den Benutzernamen und das Passwort eingeben müssen.

Hinweis: Das Platzhalterattribut gilt für die folgenden Eingabetypen: Text, Suche, URL, Tel., E-Mail und Passwort.

1. So verwenden Sie das Platzhalterattribut

Syntax: placeholder="Was Sie auffordern möchten"

Sie können es direkt in eingeben Eingabe, die aufgefordert werden muss Fügen Sie dem Feld das Platzhalterattribut hinzu, zum Beispiel:

<input type="text" id="input" placeholder="请输入用户名" />

Rendering:

Wie in der Abbildung gezeigt, fordert das Eingabefeld den Benutzer auf, den Benutzernamen einzugeben

2. Ändern Sie das Platzhalterattribut

Wenn das Platzhalterattribut Standardfarbe, Standardstil usw. unsere Anforderungen nicht erfüllen kann, müssen wir seinen Stil ändern.

Schreiben: input::-webkit-input-placeholder{den Stil, den Sie ändern möchten

Da Platzhalter ein neu hinzugefügtes Attribut in HTML5 ist, müssen Sie auf die Browserkompatibilität achten.

::-webkit-input-placeholder{} /* Browser, die den Webkit-Kernel verwenden*/

:-moz-placeholder{} /* Firefox-Version 4-18 */

< -> :: -Moz-Placeholder {}/* Firefox Version 19+*/

:-MS-Input-Placeholder {}/* ie Browser*/

Beispiel: Ändern Sie den Platzhalter Stil, stellen Sie die Farbe des Texts im Eingabeaufforderungsfeld auf Rot und die Schriftart auf 20 Pixel ein, sodass der Text horizontal und zentriert im Eingabefeld angezeigt wird. Der Code lautet wie folgt:

HTML-Teil:

<input type="text" id="input" placeholder="请输入用户名" />

CSS-Teil:

input{width: 200px;height: 40px;}
#input::-webkit-input-placeholder {
	 color: red;
	 font-size: 20px;
	 text-align: center;
	}
#input:-moz-placeholder {
	color: red;
	font-size: 20px;
	text-align: center;
	}
#input:-ms-input-placeholder {
	color: red;
	font-size: 20px;
	text-align: center;
	}

Rendering:

Zusammenfassung: Oben wird erläutert, wie Sie Platzhalterattribute verwenden und den Platzhalterstil ändern. Dies ist relativ einfach, Sie müssen jedoch auf die Browserkompatibilität achten. Für diejenigen unter Ihnen, die noch nie mit Platzhaltern in Berührung gekommen sind, können Sie es selbst ausprobieren. Ich hoffe, es kann Ihnen helfen!

Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erläuterung zur Verwendung des Platzhalterattributs und zur Änderung des Standardstils des Platzhalters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!