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], die folgenden CSS-Stile jedoch not Funktioniert nicht:

CSS

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

HTML-Eingabeanweisung

<input type="text" placeholder="Value" />

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

Mozilla Firefox 4-18 verwendet Pseudoklassen

:-moz-placeholder

Mozilla Firefox 19+ verwendet Pseudo -elements

::-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 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; 
}

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; 
}

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 zum Ändern der Platzhalterattribute zu verwenden.

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 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!