Beispielcode zum Ändern des Textstils der Eingabeaufforderung in HTML
|
Auf vielen Websites wird im Eingabefeld Hinweistext angezeigt. Sehen wir uns an, wie Hinweistext im Eingabefeld angezeigt wird. Wir müssen lediglich Folgendes im <input>-Tag hinzufügen: placeholder="prompt text". Was also, wenn wir den Stil des Eingabeaufforderungstextes ändern möchten? Sie können den CSS-Stil wie folgt festlegen:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Eingabefeld-Eingabeaufforderungstext</title>
<Stil>
/*Ändern Sie die Farbe des Eingabeaufforderungstextes*/
input::-webkit-input-placeholder { /* WebKit-Browser */
Farbe: rot;
}
Eingabe: -moz-Platzhalter { /* Mozilla Firefox 4 bis 18 */
Farbe: rot;
}
Eingabe::-moz-Platzhalter { /* Mozilla Firefox 19+ */
Farbe: rot;
}
Eingabe: -ms-Input-Placeholder { /* Internet Explorer 10+ */
Farbe: rot;
}
</Stil>
</Kopf>
<Text>
<input type="text" placeholder="Bitte geben Sie Ihren Benutzernamen ein" />
</body>
</html>Der geänderte Eingabeaufforderungstextstil lautet wie folgt:
PS: Schauen wir uns die erforderliche Attribut-Eingabeaufforderungstextänderung des Eingabe-Tags in HTML5 an Beim Absenden eines Formulars stoßen wir manchmal auf eine solche Anforderung. Wenn der Benutzer das Formular absendet, ohne die erforderlichen Informationen einzugeben, muss der Eingabetext in die gewünschten Eingabeinformationen geändert werden. In diesem Fall können wir die folgende Anweisung in die Eingabe einfügen:
<input type="text" placeholder="Ihr Name" erforderlich oninvalid="setCustomValidity('Bitte geben Sie Ihren Namen ein');" oninput="setCustomValidity('');" />Dies ist das Ende dieses Artikels zum Ändern des Textstils der Eingabeaufforderung in HTML. Weitere relevante Inhalte zum Textstil der HTML-Eingabe finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: So verwenden Sie Typescript zum Kapseln von lokalem Speicher
Artikel empfehlen
Detailliertes Tutorial zur automatischen Installation von CentOS7.6 mit PXE
1. Nachfrage Die Basis verfügt über 300 neue Serv...
Verwenden von js zum Implementieren eines Zahlenratespiels
Letzte Woche gab mir der Lehrer eine kleine Hausa...
Detaillierte Erklärung zweier Methoden zur Behebung eines Fehlers in der Justify-Content-Space-Between-Ausrichtung des Flex-Layouts
Wenn Sie „display:flex, justify-content: space-be...
Implementierung von proxy_pass im Nginx-Reverse-Proxy
Das Format ist einfach: Proxy_Pass-URL; Die URL u...
Prinzipien und Beispiele für Lambda-Ausdrücke
Lambda-Ausdrücke Lambda-Ausdrücke, auch Closures ...
Bedeutung und Verwendung einer Linux-CD
Was bedeutet Linux-CD? Unter Linux bedeutet cd „V...
10 hervorragende Web-UI-Bibliotheken/Frameworks
1. IT Mill-Toolkit IT Mill Toolkit ist ein Open-S...
Detaillierte Schritte zur Installation der angegebenen Docker-Version (1.12.6) mit RPM
1. Gründe Wenn das System Centos7.3 ist, ist die ...
So ändern Sie den MySQL-Zeichensatz
1. Überprüfen Sie den Zeichensatz von MySQL Varia...
So verwenden Sie den Skeleton-Bildschirm im Vue-Projekt
Heutzutage ist die Anwendungsentwicklung grundsät...
Textmodus im IE! Einführung in die Rolle von DOCTYPE
Nachdem das im vorherigen Artikel besprochene Prob...
Detaillierte Erklärung zum MySQL-Datenarchivierungstool mysql_archiver
Inhaltsverzeichnis I. Überblick 2. pt-archiver Ha...
So installieren Sie JDK 13 in einer Linux-Umgebung mithilfe eines komprimierten Pakets
Was ist JDK? Nun, wenn Sie diese Frage nicht kenn...
Detaillierte Erläuterung der Docker-Container-Cross-Host-Multi-Netzwerksegment-Kommunikationslösung
1. MacVlan Es gibt viele Lösungen, um eine netzwe...
JavaScript zum Implementieren einer zeitlich begrenzten Flash-Sale-Funktion
In diesem Artikel wird der spezifische JavaScript...