web-dev-qa-db-fra.com

Comment résoudre la différence de CSS d'espace réservé entre différents navigateurs?

J'utilise le CSS d'amorçage de Twitter. Ci-dessous, vous pouvez voir comment le même code est affiché différemment avec FireFox et Chrome.

C'est assez étrange. Firebug me dit que le css de l'espace réservé est défini comme gris clair:

:-moz-placeholder {
    color: #999999;
}

Cela devrait affecter tous les espaces réservés de tous les éléments, comme cela a été correctement fait dans Chrome. Mais dans Firefox, pourquoi textareas est-il correctement appliqué, alors que input ne l’est pas? Comment puis-je réparer cela?

<input id="id_referred_by" type="text" maxlength="50" name="referred_by" placeholder="...was referred by?">

<textarea id="id_contacts_interests" name="contacts_interests" cols="40" placeholder="Any particular interests?" rows="4"></textarea>

Chrome:

enter image description here

Firefox:

enter image description here

mettre à jour:

Les commentaires ci-dessous m'ont donné une idée:

Input a, contrairement à textarea, l'entrée color: #9999 barrée, ce qui signifie que quelque chose la remplace.

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    color: #555555;
    display: inline-block;
    font-size: 13px;
    height: 18px;
    line-height: 18px;
    margin-bottom: 9px;
    padding: 4px;
}

C'est en fait ce color: #555555;. Lorsque je le désactive dans Firebug, tout fonctionne. Comment se fait-il que Chrome ne s'en soucie pas mais Firefox le fasse? Des conseils pour résoudre ce problème dans les deux navigateurs? Je suis encore nouveau en CSS.

csstwitter-bootstrapplaceholder
12
Houman

J'ai fait un peu de violon il y a quelque temps à cause de ce pseudo-élément bizarre, le résultat? Vous ne pouvez pas ajouter un coma entre les sélecteurs, vous devez spécifier votre règle deux fois, c'est dommage.

Le HTML: 

<input type="text" id="test-webkit" placeholder="test-webkit" /><br />
<input type="text" id="test-moz" placeholder="test-moz" /><br />
<input type="text" id="test-both" placeholder="test-both" /><br />
<input type="text" class="test-both" placeholder="test-both-separately" />​

Le CSS: 

/* Works on Webkit */
#test-webkit::-webkit-input-placeholder {
    color: red;
}

/* Works on Firefox */    
#test-moz:-moz-placeholder {
    color: red;
}

/* Don't work */
#test-both::-webkit-input-placeholder, #test-both:input:-moz-placeholder {
    color: red;
}

/* Works on both */
.test-both::-webkit-input-placeholder {
    color: red;
}
.test-both:-moz-placeholder {
    color: red;
}​

Le Fiddle .

8
Calvein

Le problème est que Firefox change l'opacité du champ, et avec cela vous pensez que c'est une couleur différente, mais ce n'est pas ... ajoutez "opacity: 1;" et cela fonctionnera exactement de la même manière dans tous les navigateurs

input:-moz-placeholder {
    color: #999999;
    opacity: 1;
}

input::-moz-placeholder {
    color: #999999;
    opacity: 1;
}
9
Vinícius Moraes

En tant que mise à jour ci-dessous, une liste complète des espaces réservés que vous devez utiliser. : -moz est obsolète dans les nouvelles versions de firefox.

Vous devez spécifier les règles plusieurs fois et vous ne pouvez pas les combiner sur une seule ligne. Cela est dû au fait que le navigateur les interprétera comme un sélecteur unique. Cela provoquera une erreur car Firefox ne connaît pas la règle du webkit.

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color:#bbb;
  font: 12px Verdana, Arial,Tahoma, sans-serif;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color:#bbb;
  font: 12px Verdana, Arial,Tahoma, sans-serif;
}
input::-moz-placeholder, textarea::-moz-placeholder {
  color:#bbb;
  font-family: 12px Verdana, Arial,Tahoma, sans-serif;
  font: normal;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color:#bbb;
  font: 12px Verdana, Arial,Tahoma, sans-serif;
}
2
Hendrik

Effacez votre cache firefox (cela peut être suffisant). 

et inspecter avec firebug 

installez firebug si ce n'est déjà fait https://addons.mozilla.org/en-US/firefox/addon/firebug/

faites un clic droit sur l'entrée, puis cliquez sur Inspecter l'élément avec Firebug.

pour voir s'il existe une propriété CSS avec une priorité plus élevée.

enter image description here

0
baptme