internet explorer - para - El CSS de marcador de posición no se aplica en IE 11

internet explorer características

Question

Tengo un problema al aplicar placeholder css.

Estoy tratando de aplicar css (es decir, color:#898F9C; ) en el marcador de posición del cuadro de entrada utilizando el selector de pseudo-clase :-ms-input-placeholder , pero no está funcionando en IE.

Demo

Después de algunos golpear e intentar, obtengo la solución de mi problema, pero es increíble.

Si eliminé el color de css / style predeterminado en input-box, el css marcador de posición funciona correctamente en IE (es un comportamiento increíble de Internet Explorer).

Mi css / estilo predeterminado:

#search
{
    color:blue;
}

Working-fiddle sin caja de entrada por defecto css

Mi pregunta es, ¿por qué no funciona con CSS predeterminado en IE?

Answer 1

En general, al diseñar marcadores de posición

Al encontrar un prefijo de proveedor no compatible, los motores de análisis de CSS considerarán que la regla completa no es válida, por lo que se requiere un conjunto de reglas separado para cada prefijo de proveedor . Además, descubrí que IE11 requiere la bandera !important para anular los estilos de agente de usuario predeterminados:

/* - Chrome ≤56,
   - Safari 5-10.0
   - iOS Safari 4.2-10.2
   - Opera 15-43
   - Opera Mobile >12
   - 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 */
::placeholder {
    color: #ccc;
    font-weight: 400;
}

Solo IE11 parece necesitar la bandera !important .

Verifique el soporte del navegador en CanIUse

La solución para su problema particular

En su ejemplo, necesitaría estos conjuntos de reglas para IE11:

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

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

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

Answer 2

Además de lo que respondió Raj , al usar los prefijos del proveedor, los selectores deben separarse en sus propios conjuntos de reglas para cada prefijo.

La razón de esto es que para permitir que el lenguaje CSS avance, los navegadores deben quitar selectores o declaraciones que no entienden. Esto permite que se agreguen nuevas características sin la preocupación de que los navegadores antiguos lo interpretarán de una manera diferente a solo dejarlo caer.

Cuando se utiliza el combinador de coma para combinar varias pseudo clases, se convierte en un selector, y el navegador debe comprender todo para aplicar ese conjunto de reglas.

En su lugar, debe crear una nueva regla para cada pseudoclase / elemento con prefijo de proveedor. Desafortunadamente, es mucha repetición, pero ese es el precio por usar CSS experimentales.

Answer 3

las definiciones deben separarse.

p.ej:

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

Vea aquí: http://jsfiddle.net/DLGFK/203/