How to solve placeholder CSS difference across different browsers?

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

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