Firefox: Transition placeholder opacity

问题

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

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

input:focus::-moz-placeholder {
    opacity: 0.1;
}
input::-moz-placeholder {
    opacity: 1;
    transition: opacity 1s;
}
input::-moz-placeholder {
    opacity: 1;
}
input:focus::-webkit-input-placeholder {
     opacity: 0.1;
}

Fiddle

Works fine in Chrome, but not in FF. The placeholder changes opacity on focus as intended, but 1s transition doesn't appear. It also definitely doesn't work in IE

EDIT: Apparently its a bug in the latest version of FF (20.0.1)

回答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

回答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?

来源：https://stackoverflow.com/questions/16381895/firefox-transition-placeholder-opacity