Floating Label with Css not working in edge, internet explorer

Question

I made Floating Label input field using Css it is working properly with chrome, firefox but not working with internet explorer and edge.

All other

Answer 1

For me, I am using Angular 7 and I found a fix that works for all browsers (but again is only in Angular as far as I know). Essentially, I had this code that worked fine in Chrome/Firefox:

input:not(:placeholder-shown) + span {
    color: blue;
    transform: translateY(-1.25rem) scale(0.75);
}

It created a floating blue label when a value in the input is entered/exists. To get it to work in Edge, I replaced the code above and made a new scss class:

.entered-value + span {
    color: blue;
    transform: translateY(-1.25rem) scale(0.75);
}

and added an [Ngclass] on the input itself that creates that class when a value exists on the input (where the value of the input is modeled to the value variable in the angular component).

Hope this helps someone.