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.

<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)

Mr. Alien · Answer 1 · 2013-05-05T06:31:34.133

2

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

edited May 05 '13 at 06:31

answered May 05 '13 at 06:14

Mr. Alien

153,751
34
298
278

@btevfik Just add the proprietary properties you want, I updated, and the question focused `firefox` but anyways I added webkit support too – Mr. Alien May 05 '13 at 06:19
actually this doesn't work in firefox either. i just realized he was asking on firefox. but what he posted didnt work on chrome either. my answer doesnt work on ff either. – btevfik May 05 '13 at 06:24
hmm. idk whats going on. i am testing on mac if that makes any difference. – btevfik May 05 '13 at 06:25
1

@btevfik For supporting firefox +19, you need to use `::` i.e `::-moz-placeholder` – Mr. Alien May 05 '13 at 06:25
@skyisred Did this work for you? http://jsfiddle.net/de9aE/17/ for color and http://jsfiddle.net/de9aE/18/ for opacity – Mr. Alien May 05 '13 at 06:44
No, in both it changes opacity, but without transition. (Got latest FF version) – skyisred May 05 '13 at 07:03
all right..i might be creeping into this conversation, but do windows and max FF differ ? – AdityaSaxena May 05 '13 at 07:07
@AdityaSaxena Nope...and skyisred I don't know what's wrong here but works completely for me – Mr. Alien May 05 '13 at 07:14
checked it on mac, doesn't work either. Alien, what version of FF do you have? – skyisred May 05 '13 at 07:20
i'm using 20.0.1, so it must be a new bug – skyisred May 06 '13 at 17:27
@skyisred it is working, install the older version and check it out – Mr. Alien May 06 '13 at 17:31
Using FF 54 and this does not work, opacity changes with no transition – Clint Jul 03 '17 at 17:25

score 1 · Answer 2 · answered Jul 08 '19 at 13:37

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?

Firefox: Transition placeholder opacity

2 Answers2

Linked

Related