Heim >Web-Frontend >H5-Tutorial >HTML5-Eingabeplatzhalter-Farbänderung example_html5-Tutorial-Fähigkeiten

HTML5-Eingabeplatzhalter-Farbänderung example_html5-Tutorial-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:47:511469Durchsuche

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

CSS

Code kopieren
Der Code lautet wie folgt:

input[placeholder], [placeholder], *[placeholder] {
color:red !important; }

HTML-Eingabeanweisung


Code kopierenDer Code lautet wie folgt:


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


Code kopierenDer Code ist wie folgt folgt:
::-webkit-input-placeholder

Mozilla Firefox 4-18 verwendet die Pseudoklasse


Kopieren Sie den CodeDer Code lautet wie folgt:
:-moz-placeholder

Mozilla Firefox 19 wird verwendet Pseudoelement


Code kopierenDer Code lautet wie folgt:
::- moz-placeholder

IE10 verwendet die Pseudoklasse


Kopieren Sie den Code Der Code ist wie folgt:
:-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.


Code kopierenDer Code lautet wie folgt:
::-webkit-input -placeholder { /* WebKit-Browser */
Farbe: #999; }
::-moz-placeholder { /* Mozilla Firefox 19 */
color: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10 */
color: #999;
}


Matt: Der Code für den Textfeldstil (Stretchable) lautet wie folgt:




Code kopieren
Der Code lautet wie folgt: input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { Farbe: # 636363;
}
Eingabe:-moz-placeholder, textarea:-moz-placeholder {
Farbe: #636363;


brillout .com: Eingabe und Die Schriftfarbe von Textarea ist komplett 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.




Code kopieren

Der Code lautet wie folgt:
*::-webkit- input-placeholder { color: red; *:-moz-placeholder {
color: red; >/* IE10 */
Farbe: rot;
}


James Donnelly: In Firefox und IE überschreibt die normale Eingabetextfarbe die Platzhalterfarbe:





Code kopieren

Der Code lautet wie folgt:


::-webkit-input-placeholder {
Farbe: rot; Textüberlauf: Auslassungspunkte;
:-moz-placeholder { Farbe: #acacac !important; -placeholder { color: #acacac !important; text-overflow: ellipsis; } /* für die Zukunft */ :-ms-input-placeholder {
color: #acacac !important ; Textüberlauf: Auslassungspunkte;
}


Es gibt noch eine andere gute Möglichkeit:

Kopieren Sie den Code
Der Code lautet wie folgt:

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:


Code kopierenDer Code lautet wie folgt:
$('[Platzhalter]').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')); 🎜>}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[ placeholder]'). every(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.




Code kopieren
Der Code lautet wie folgt: form .placeholder { color: #222;
font-size: 25px;
/* etc */


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




Code kopieren

Der Code lautet wie folgt:
input type="text" value=" Platzhaltertext" onfocus="this.style.color='#000'; this.value=';" style="color: #f00;"/>
Stellungnahme:
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