wake-up-neo.com

Platzhalter-CSS wird in IE 11 nicht angewendet

Beim Anwenden von Platzhalter-CSS treten Probleme auf.

Ich versuche CSS anzuwenden (d. H. color:#898F9C;) auf Eingabefeld-Platzhalter mit Pseudoklassen-Selektor :-ms-input-placeholder , aber es funktioniert nicht im IE.

Demo

Nach einigem Hin und Her bekomme ich eine Lösung für mein Problem, aber es ist erstaunlich.

Wenn ich die Standard-CSS/Style-Farbe im Eingabefeld entfernt habe, funktioniert das Platzhalter-CSS im IE einwandfrei (es ist ein erstaunliches Verhalten von Internet Explorer).

Mein Standard CSS/Style:

#search
{
    color:blue;
}

Working-Fiddle ohne Eingabefeld Standard CSS

Meine Frage ist, warum es nicht mit Standard-CSS im IE funktioniert?

36
Ishan Jain

Zusätzlich zu what antwortete Raj müssen die Selektoren bei der Verwendung von Herstellerpräfixen für jedes Präfix in eigene Regelsätze unterteilt werden.

Der Grund dafür ist, dass Browser Selektoren oder Deklarationen ablegen müssen, die sie nicht verstehen, damit die CSS-Sprache erweitert werden kann. Auf diese Weise können neue Funktionen hinzugefügt werden, ohne dass alte Browser dies anders interpretieren als nur löschen müssen.

Wenn Sie den Komma-Kombinator verwenden, um die verschiedenen Pseudoklassen zu kombinieren, verwandeln Sie ihn in einen Selektor, und der Browser muss das Ganze verstehen, um diesen Regelsatz anzuwenden.

Stattdessen sollten Sie für jede Pseudoklasse/jedes Pseudoelement mit Herstellerpräfix einen neuen Regelsatz erstellen. Leider ist es eine Menge Wiederholungen, aber das ist der Preis für die Verwendung von experimentellem CSS.

22
David Storey

Im Allgemeinen beim Stylen von Platzhaltern

Wenn CSS-Parsing-Engines auf ein nicht unterstütztes Herstellerpräfix stoßen, wird die gesamte Regel als ungültig betrachtet, weshalb ein separater Regelsatz für jedes Herstellerpräfix erforderlich ist . Außerdem stellte ich fest, dass IE11 das Flag !important Benötigt, um die Standard-Benutzeragentenstile zu überschreiben:

/* - Chrome ≤56,
   - Safari 5-10.0
   - iOS Safari 4.2-10.2
   - Opera 15-43
   - Opera Mobile 12-12.1
   - Android Browser 2.1-4.4.4
   - Samsung Internet ≤6.2
   - QQ Browser */
::-webkit-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 4-18 */
:-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 19-50 */
::-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {
    color: #ccc !important;
    font-weight: 400 !important;
}

/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* CSS Pseudo-Elements Level 4 Editor's Draft
   - Browsers not mentioned in vendor prefixes
   - Browser of newer versions than mentioned in vendor prefixes */
::placeholder {
    color: #ccc;
    font-weight: 400;
}

Nur IE11 scheint das Flag !important Zu benötigen.

Browserunterstützung bei CanIUse prüfen

Die Lösung für Ihr spezielles Problem

In Ihrem Beispiel benötigen Sie diese Regelsätze für IE11:

#search:-ms-input-placeholder {
    color: #898F9C !important; /* IE11 needs the !important flag */
}

/* (...) Other vendor prefixed rulesets omitted for brevity */

#search::placeholder {
    color: #898F9C;
}

die Definitionen müssen getrennt werden.

z.B:

#search
{
    color:blue;
}

#search::-webkit-input-placeholder {
   color: red;
}

#search:-moz-placeholder {
   color: red;
}

#search::-moz-p {
   color: red;
}

#search:-ms-input-placeholder {
   color: red;
}

Siehe hier: http://jsfiddle.net/DLGFK/203/

20
Raj Parmar

Wenn jemand hierher gekommen ist, weil er den font-size Nicht ändern kann - Derzeit wird font-size Für Placeholder nicht unterstützt auf IE und Edje. Es scheint nicht, dass sie gehen um es bald zu beheben. Problem # 11342294

1
jonathana