Firefox: Transition placeholder opacity

Question

I wanted to make input placeholder fade smoothly on focus using transition, but can\'t get it to work in FF.

Answer 1

How about doing it like this? Instead of using opacity, switch the color shades

Demo

<input type="text" placeholder="some cool text"/>

input[type=text]:-moz-placeholder {
color: #000;
transition: color 1s;
}

input[type=text]:focus:-moz-placeholder {
    color: #aaa;
}

input[type=text]::-webkit-input-placeholder {
    color: #000;
    transition: color 1s;
}

input[type=text]:focus::-webkit-input-placeholder {
    color: #aaa;
}

Certainly you can use opacity if you want but you can see the result yourself and decide what's better for you, opacity demo

Note: Use ::-moz-placeholder to support +19 Ver

Answer 2

Transition on ::placeholder should not be supported by any browser as it is not defined by specification, so that can be considered non-standard behavior. The fact that Firefox does not support it is correct behavior:

https://bugzilla.mozilla.org/show_bug.cgi?id=1115623

By specification, only ::after and ::before pseudo-elements have transition property enabled. All other pseudo-elements don't.

Here's more: Why is a transition property on the placeholder pseudoelement valid in Chrome?