web-dev-qa-db-fra.com

Placeholder CSS non appliqué dans IE 11

J'obtiens un problème en appliquant le css de placeholder.

J'essaie d'appliquer css (c'est-à-dire color:#898F9C;) sur l’espace réservé à la zone de saisie à l’aide du sélecteur de pseudo-classes :-ms-input-placeholder , mais cela ne fonctionne pas dans IE.

démo

Après avoir essayé et essayé, je trouve une solution à mon problème, mais c'est incroyable.

Si j'ai supprimé la couleur de style/css par défaut sur la zone de saisie, le css réservé fonctionne correctement dans IE (c'est le comportement étonnant d'Internet Explorer).

Mon css/style par défaut:

#search
{
    color:blue;
}

travail-violon sans css par défaut de input-box

Ma question est la suivante: pourquoi ne fonctionne-t-il pas avec les CSS par défaut dans IE?

internet-explorerplaceholderinternet-explorer-11pseudo-class
36
Ishan Jain

En complément de ce que Raj répondit , lors de l’utilisation des préfixes de fournisseur, les sélecteurs doivent être séparés en leurs propres ensembles de règles pour chaque préfixe.

La raison en est que pour permettre au langage CSS de progresser, les navigateurs doivent supprimer des sélecteurs ou des déclarations qu’ils ne comprennent pas. Cela permet d’ajouter de nouvelles fonctionnalités sans craindre que les anciens navigateurs l’interprètent différemment, autrement que de le laisser tomber.

Lorsque vous utilisez le combinateur de virgule pour combiner les différentes pseudo-classes, vous le transformez en un sélecteur unique et le navigateur doit tout comprendre pour appliquer ce jeu de règles.

A la place, vous devez créer un nouvel ensemble de règles pour chaque pseudo classe/élément préfixé par le fournisseur. Malheureusement, les répétitions sont nombreuses, mais c’est le prix à payer pour l’utilisation de CSS expérimental.

22
David Storey

En général, lors du style des espaces réservés

Lorsqu'ils rencontrent un préfixe de fournisseur non pris en charge, les moteurs d'analyse CSS considèrent la règle entière comme non valide. C'est pourquoi un ensemble de règles distinct pour chaque préfixe de fournisseur est requis . De plus, j'ai trouvé que IE11 nécessite le !important drapeau pour remplacer les styles d’agent utilisateur par défaut:

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

Seul IE11 semble avoir besoin du !important drapeau.

Vérifiez la prise en charge du navigateur sur CanIUse

La solution à votre problème particulier

Dans votre exemple, vous auriez besoin de ces règles pour IE11:

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

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

#search::placeholder {
    color: #898F9C;
}
79
Lars Gyrup Brink Nielsen

les définitions doivent être séparées.

par exemple:

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

Voir ici: http://jsfiddle.net/DLGFK/203/

20
Raj Parmar

Si quelqu'un est venu ici parce qu'il ne peut pas changer le font-size - Actuellement font-size for Placeholder n'est pas pris en charge sur IE et Edje. Il ne semble pas qu'ils vont le réparer de si tôt. --- Issue # 11342294

1
jonathana