web-dev-qa-db-fra.com

La modification de la couleur de l'espace réservé HTML5 d'une entrée avec CSS ne fonctionne pas sur Chrome

J'ai essayé de suivre le sujet suivant, mais sans succès. Changer la couleur de l'espace réservé d'une entrée HTML5 avec CSS

J'ai essayé de coloriser mon espace réservé, mais il reste toujours gris sur Chrome 17.0.963.56 m.

[~ # ~] html [~ # ~] 

<input type='text' name='test' placeholder='colorize placeholder' value='' />

[~ # ~] css [~ # ~] 

INPUT::-webkit-input-placeholder, 
INPUT:-moz-placeholder {
    color:red;
}
input[placeholder], [placeholder], *[placeholder]
{
    color:green !important;
}

JSfiddle

Sur Firefox 10.0.2, cela fonctionne bien.

cssgoogle-chromeplaceholder
39
el-teedee

Vous oubliez un :. À cause de cela, le sélecteur entier a été corrompu et n'a pas fonctionné. http://jsfiddle.net/a96f6/87/

Edit: Il semble que (après une mise à jour?) Cela ne fonctionne plus, essayez ceci:

input::-webkit-input-placeholder{
    color:red;
}
input:-moz-placeholder {
    color:red;
}

Remarque: ne mélangez pas les sélecteurs de préfixe du fournisseur (-moz, -webkit, -ms, ...). Chrome par exemple ne comprendra pas "-moz-", puis ignore tout le sélecteur.

Modifier pour clarification: Pour le faire fonctionner dans tous les navigateurs, utilisez ce code:

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

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

::-ms-placeholder {
    color:red;
}

::placeholder {
    color:red;
}

La

77
Alex

Comme l'a dit @Alex, pour une raison quelconque, vous ne pouvez pas combiner les sélecteurs pour plusieurs navigateurs.

Ceci fonctionnera

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

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

::-ms-placeholder {
    color:red;
}

::placeholder {
    color:red;
}

Mais cela ne fonctionnera pas (dans Chrome au moins):

::-webkit-input-placeholder,
::-moz-placeholder,
::-ms-placeholder,
::placeholder {
    color:red;
}

On dirait une implémentation de navigateur bizarre pour moi.

Notez également que vous n'êtes pas obligé de définir des styles d'espace réservé globalement, vous pouvez toujours étendre le ::placeholder sélecteur comme vous le faites normalement. Cela marche:

.my-form .input-text::-webkit-input-placeholder {
    color:red;
}

.my-form .input-text::-moz-placeholder {
    color:red;
}
21
Dmitry Pashkevich

Je viens de rencontrer le même problème et j'ai pensé qu'il serait bon de partager. Pour une raison quelconque, la couleur ne change pas sur Firefox et j'ai remarqué que ce n'est que lorsque j'utilise des valeurs hexadécimales, je l'ai donc fait de cette façon pour un site Web particulier:

::-webkit-input-placeholder {
    color: #666666;
}

::-moz-placeholder {
    color: black;
}

::-ms-placeholder {
    color: #666666;
}

::placeholder {
    color: #666666;
}
4
deSousa
::-webkit-input-placeholder {
    color: #008000;
}
0
Michael Christensen