Heim > Web-Frontend > CSS-Tutorial > Farbänderung des HTML5-Eingabeplatzhalters

Farbänderung des HTML5-Eingabeplatzhalters

不言
Freigeben: 2018-06-28 15:29:16
Original
1701 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das Wissen über die Farbänderung von HTML5-Eingabeplatzhaltern vorgestellt.

Chrome unterstützt das Platzhaltertextattribut input=[type=text], die folgenden CSS-Stile jedoch not Funktioniert nicht:

CSS

input[placeholder], [placeholder], *[placeholder] { 
color:red !important; 
}
Nach dem Login kopieren

HTML-Eingabeanweisung

<input type="text" placeholder="Value" />
Nach dem Login kopieren

Der laufende Ergebniswert ist immer noch grau, 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
Nach dem Login kopieren

Mozilla Firefox 4-18 verwendet Pseudoklassen

:-moz-placeholder
Nach dem Login kopieren

Mozilla Firefox 19+ verwendet Pseudo -elements

::-moz-placeholder
Nach dem Login kopieren

IE10 verwendet Pseudoklassen

:-ms-input-placeholder
Nach dem Login kopieren

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; 
}
Nach dem Login kopieren

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; 
}
Nach dem Login kopieren

brillout.com: Die Schriftfarbe von Eingabe und Textbereich ist rot. Alle Stile müssen für verschiedene Selektoren spezifisch sein und sollten nicht als Ganzes 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; 
}
Nach dem Login kopieren

James Donnelly: So überschreiben Sie in Firefox und IE die Platzhalterfarbe mit der normalen Eingabetextfarbe:

::-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; 
}
Nach dem Login kopieren

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; 
}
Nach dem Login kopieren

Der letzte wurde online gefunden:

$(&#39;[placeholder]&#39;).focus(function() { 
var input = $(this); 
if (input.val() == input.attr(&#39;placeholder&#39;)) { 
input.val(&#39;&#39;); 
input.removeClass(&#39;placeholder&#39;); 
} 
}).blur(function() { 
var input = $(this); 
if (input.val() == &#39;&#39; || input.val() == input.attr(&#39;placeholder&#39;)) { 
input.addClass(&#39;placeholder&#39;); 
input.val(input.attr(&#39;placeholder&#39;)); 
} 
}).blur(); 
$(&#39;[placeholder]&#39;).parents(&#39;form&#39;).submit(function() { 
$(this).find(&#39;[placeholder]&#39;).each(function() { 
var input = $(this); 
if (input.val() == input.attr(&#39;placeholder&#39;)) { 
input.val(&#39;&#39;); 
} 
}) 
});
Nach dem Login kopieren

Die Regel zum Aufrufen dieses Codes besteht darin, zuerst Javascript zu laden und dann CSS zum Ändern der Platzhalterattribute zu verwenden.

form .placeholder { 
color: #222; 
font-size: 25px; 
/* etc */ 
}
Nach dem Login kopieren

user1729061: Sie können den gleichen Effekt erzielen, ohne CSS und Platzhaltertext zu verwenden.

input type="text" value="placeholder text" onfocus="this.style.color=&#39;#000&#39;; 
this.value=&#39;&#39;;" style="color: #f00;"/>
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Verwenden Sie PHP und HTML5 FormData, um einen aktualisierungsfreien Datei-Upload zu erreichen

HTML5 verwendet DOM für benutzerdefinierte Steuerung

HTML5-Canvas-Implementierung zum Zeichnen einfacher Rechtecke und Dreiecke

Das obige ist der detaillierte Inhalt vonFarbänderung des HTML5-Eingabeplatzhalters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage