How to solve placeholder CSS difference across different browsers? - css

Question

I am using Twitter bootstrap CSS. Below you can see how the same code is displayed differently with FireFox and Chrome.
This is quite strange. Firebug tells me that the placeholder's css is set like this to light grey:
:-moz-placeholder {
color: #999999;
}
This should affect all placeholders within all elements as its correctly done in Chrome.
But in Firefox why are textareas correctly applied, but input is not? How can I fix this?
<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:
Firefox:
update:
The comments below gave me an idea:
Input has unlike textarea the color: #9999 entry crossed out, which means something is overriding it.
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;
}
It is in fact this color: #555555;. When I disable it in firebug, it all works. How comes Chrome doesn't care about this but Firefox do? Any tips how fix this across both browsers? I am still new to css.

Answer 1

I've made a little fiddle a while ago because of this weird pseudo-element, the result ? You can't add a coma between the selector, you have to specify your rule twice, that's a shame.
The 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" />​
The 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;
}​
The Fiddle.

Answer 2

The problem is that Firefox change the opacity of the field, and with that you think its a different color, but its not... add "opacity:1;" and it will work exactly the same in all browsers
input:-moz-placeholder {
color: #999999;
opacity: 1;
}
input::-moz-placeholder {
color: #999999;
opacity: 1;
}

Answer 3

As an update below a full list of placeholders you need to use. :-moz is deprecated in newer firefox versions.
You need to specify the rules several times and can not combine them on a single line. This is due to the fact that the browser will interpret them as a single selector. It will cause an error because Firefox does not know the webkit rule.
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;
}

Answer 4

Clear your firefox cache (it may be enough).
and inspect with firebug
install firebug if it's not allready done https://addons.mozilla.org/en-US/firefox/addon/firebug/
right click on the input, and click on Inspect Element with Firebug.
to see if there's a css property with an higher priority.