Informationen zur Farbänderung des HTML5-Eingabeplatzhalters
In diesem Artikel wird hauptsächlich das Wissen über die Farbänderung von HTML5-Eingabeplatzhaltern vorgestellt.
Chrome unterstützt das Platzhaltertextattribut „input=[type=text]“, aber die folgenden CSS-Stile funktionieren nicht:
CSS
input[placeholder], [placeholder], *[placeholder] { color:red !important; }
HTML-Eingabeanweisung
<input type="text" placeholder="Value" />
Der laufende Ergebniswert ist immer noch grau und Farbe: Rot hat keine Auswirkung. Gibt es eine Möglichkeit, die Farbe des Platzhaltertextes zu ändern? Ich habe das jQuery-Platzhaltertext-Plugin in meinem Browser installiert, aber es funktioniert immer noch nicht. (!important wird nur von IE7 und Firefox erkannt)
Antwort:
toscho: Es gibt drei Implementierungsmethoden: Pseudoelemente, Pseudoklassen und Notihing.
WebKit und Blink (Safari, Google Chrome, Opera15+) verwenden Pseudoelemente
::-webkit-input-placeholder
Mozilla Firefox 4-18 verwenden Pseudoklassen
:-moz-placeholder
Mozilla Firefox 19+ verwenden Pseudoelemente
::-moz-placeholder
IE10 verwendet Pseudoklassen
:-ms-input-placeholder
CSS-Selektoren in Versionen unter IE9 und Opera12 unterstützen keinen Platzhaltertext. Es ist zu beachten, dass Pseudoelemente die eigentliche Rolle von Elementen im Shadow DOM spielen.
CSS-Auswahl
Da die CSS-Auswahl jedes Browsers unterschiedlich ist, müssen für jeden Browser separate Einstellungen vorgenommen werden.
::-webkit-input-placeholder { /* WebKit browsers */ color: #999; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; }
Matt: Der Code für den Textbereichsstil (Textfeld dehnbar) lautet wie folgt:
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #636363; } input:-moz-placeholder, textarea:-moz-placeholder { color: #636363; }
brillout.com: Die Schriftfarbe von Eingabe und Textbereich ist rot. Alle Stile müssen für verschiedene Selektoren spezifisch sein und sollten nicht für die Gesamtverarbeitung gepackt werden, denn wenn einer von ihnen ausfällt, schlagen auch die anderen aus.
*::-webkit-input-placeholder { color: red; } *:-moz-placeholder { color: red; } *:-ms-input-placeholder { /* IE10+ */ color: red; }
James Donnelly: Wie man in Firefox und IE die Platzhalterfarbe mit der normalen Eingabetextfarbe überschreibt:
::-webkit-input-placeholder { color: red; text-overflow: ellipsis; } :-moz-placeholder { color: #acacac !important; text-overflow: ellipsis; } ::-moz-placeholder { color: #acacac !important; text-overflow: ellipsis; } /* for the future */ :-ms-input-placeholder { color: #acacac !important; text-overflow: ellipsis; }
Es gibt noch eine andere gute Möglichkeit:
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; } input:-moz-placeholder, textarea:-moz-placeholder { color: #666; } input::-moz-placeholder, textarea::-moz-placeholder { color: #666; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #666; }
Der letzte wurde online gefunden:
$('[placeholder]').focus(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); input.removeClass('placeholder'); } }).blur(function() { var input = $(this); if (input.val() == '' || input.val() == input.attr('placeholder')) { input.addClass('placeholder'); input.val(input.attr('placeholder')); } }).blur(); $('[placeholder]').parents('form').submit(function() { $(this).find('[placeholder]').each(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); } }) });
Die Regel zum Aufrufen dieses Codes besteht darin, zuerst Javascript zu laden und dann CSS zu verwenden, um die Platzhalterattribute zu ändern.
form .placeholder { color: #222; font-size: 25px; /* etc */ }
user1729061: Sie können den gleichen Effekt erzielen, ohne CSS und Platzhaltertext zu verwenden.
input type="text" value="placeholder text" onfocus="this.style.color='#000'; this.value='';" style="color: #f00;"/>
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
Analyse inhaltsbearbeitbarer HTML5-Attribute
Das obige ist der detaillierte Inhalt vonInformationen zur Farbänderung des HTML5-Eingabeplatzhalters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
