CODEWITHSUNDEEP
htmlcssbootstrap-4material-designfloating
thehaxdev
thehaxdev

Reputation: 81

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.

Upvotes: 0

Views: 1662

Answers (3)

thehaxdev
thehaxdev

Reputation: 81

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"

Upvotes: 0

Kravimir
Kravimir

Reputation: 690

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.

Upvotes: 1

Sonia
Sonia

Reputation: 1919

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.

Upvotes: 0

Related Questions