0

A login page I am working on will float a label above text input once some text is entered in the input field, this works great across most browsers but it does not seem to work in IE11.

I'm assuming this has to do with an IE compatibility issue with "placeholder-shown", these lines in particular:

.form-label-group input:not(:placeholder-shown) {
  padding-top: calc(0.75rem + 0.75rem * 0.66);
  padding-bottom: calc(0.75rem / 3);
}

.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: calc(0.75rem / 3);
  padding-bottom: calc(0.75rem / 3);
  font-size: 12px;
  color: #777;
}

I've tried changing the above code to:

.form-label-group input:not(:focus) {
  padding-top: calc(0.75rem + 0.75rem * 0.66);
  padding-bottom: calc(0.75rem / 3);
}

.form-label-group input:not(:focus) ~ label {
  padding-top: calc(0.75rem / 3);
  padding-bottom: calc(0.75rem / 3);
  font-size: 12px;
  color: #777;
}

Which still doesn't work properly. Not quite sure what else can be done to get this to work on IE11.

thehaxdev
  • 71
  • 8

3 Answers3

1

IE11 and IE10 use the non-standard :-ms-input-placeholder instead of the standard :placeholder-shown pseudo-class. By the way, MS Edge supports neither.

Here's a related question with a cross-browser solution.

Kravimir
  • 691
  • 1
  • 6
  • 7
0

CSS variables are not supported by IE11. Check the link below for more specific support for browsers for CSS variables.

enter link description here

So, just add the fallback for "var" and it will work.

Sonia
  • 1,909
  • 1
  • 11
  • 13
  • It is true that IE doesn't support CSS variables, but that's NOT the issue here. Even if the CSS variables are removed the floating label still does not work properly in IE (**I've updated the jsfiddle link to a new one without CSS variables**). Like I've stated in the question, I'm 99% sure the issue has to do with "placeholder-shown" – thehaxdev May 03 '19 at 07:54
0

The issue ended up being "placeholder-shown" in CSS.

In order to fix it I used javascript to simulate the functionality of CSS's "placeholder-shown"

thehaxdev
  • 71
  • 8