While developing a login page, I encountered an issue where the label above a text input field did not float properly once text was entered in most browsers, specifically Internet Explorer 11.
I believe this problem is related to IE's compatibility with "placeholder-shown". The following CSS lines seem to be causing the issue:
.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 attempted to modify the code as follows:
.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;
}
However, this change did not resolve the issue in IE11. I am unsure of what other steps can be taken to address this problem.