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]:-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