font-size not working in IE edge for placeholder

Question

I am working on a web application, just found few issue in ie edge. One of them is font-size property is ignored in IE Edge for placeholder. It's quite strange. Also found it's known issue and already reported. Does anyone knows any workaround ?

<input type="text" placeholder="Search"/>

input::-ms-input-placeholder{color:#f00; font-size:50px;}

example:http://codepen.io/anon/pen/jqvLdG

Answer 1

There is bug: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3901363/ In Creators update it will be fixed. Right now : apply all style by default, add class when some data is entered. Then you have separated state of placeholder and it will work on IE Edge

Answer 2

It's a bug. You can use transform to adjust the font size.

input::-ms-input-placeholder {
  color: red;
  font-size: 0.8rem;
  transform: scale(0.9) translateX(-0.1rem);
}