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!