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