Search code examples
htmlcssbootstrap-4material-designfloating

IE11 Floating Input Label Bug (placeholder-shown issue?)

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.

Solution

  • 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"