IE11 Placeholder Transition Issue

I hit an issue recently in IE11 where an input wasn’t visible until it was focused. There was a really nice transition in place of when the input is focused, it expands and the placeholder fades in after a short delay.

For some reason, in IE11, the input wasn’t visible until it was focused.

The rule was essentially something like this:

input::placeholder {
  opacity: 0;
  transition: opacity ease 0.2s;
}

input:focus::placeholder {
  opacity: 1;
}

This works as expected in modern browsers, but autoprefixer generates the following as well:

input:ms-input-placeholder {
  /* same as above */
}

The opacity rule was applied to the input itself, and so it wasn’t visible. I tried adding a comment telling autoprefixer to ignore it, but we’re locked on an older version that doesn’t have that capability. So what now?

Turns out it’s a small change. We swap opacity for color.

input::placeholder {
  color: transparent;
  transition: color ease 0.2s;
}

input:focus::placeholder {
  color: #a9a9a9;
}

I haven’t worked with IE11 in a few years, but it was a fun one to chase down. I made a demo on CodePen to test it out.