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

>>: So verwenden Sie position:sticky, um das Problem kleiner Programme, die an der Decke haften, perfekt zu lösen

Beispielcode zum Ändern des Textstils der Eingabeaufforderung in HTML

So verwenden Sie Node.js, um festzustellen, ob ein PNG-Bild transparente Pixel hat

Drei Möglichkeiten zum Implementieren eines Textfarbverlaufs in CSS

So fügen Sie Batchdaten unter Node.js in eine MySQL-Datenbank ein

So fügen Sie Nginx dynamisch Module hinzu

Tutorial zur Bedienung und Wartung von Linux, grundlegende Swap-Partition und LVM-Verwaltung

So implementieren Sie Web-Stresstests mit Apache Bench

JavaScript implementiert die Maussteuerung eines frei beweglichen Fensters

Beispielerklärung für langsame MySQL-Abfragen und -Protokolle

Vue3-Kompilierungsprozess - Quellcodeanalyse

Installationsprozess von CentOS8 Linux 8.0.1905 (Abbildung)

Artikel empfehlen

Detaillierte Erklärung zur Verwendung von MySQL Online DDL

Eine kurze Diskussion über die Semantik von HTML und einige einfache Optimierungen

Dieser Artikel zeigt Ihnen das Prinzip der MySQL Master-Slave-Synchronisation

Detaillierte Erklärung des Lebenszyklus von Angular-Komponenten (Teil 2)

Css3 realisiert nahtloses Scrollen und Anti-Shake

Reines CSS-Dropdown-Menü

TypeScript-Dekorator-Definition

Win10 Installation von MySQL 5.7 MSI-Version des Tutorials mit Bildern und Text

Versteckter Overhead von Unix/Linux-Forks

Detaillierte Erklärung der schmerzlosen Token-Aktualisierungsmethode von Uniapp

Vant+postcss-pxtorem implementiert Browser-Anpassungsfunktion

Prinzipien und Beispiele für Lambda-Ausdrücke

Warum gibt es das in JS?

Vue: Zwei Komponenten auf gleicher Ebene erreichen eine Wertübertragung

Nginx implementiert dynamische und statische Trennung Beispielerklärung