HTML5-Eingabeplatzhalter-Farbänderung example_html5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 15:47:51

Original

1463 Leute haben es durchsucht

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;"/>