Fixes Edge and IE label overlapping issue (#25919)

The 'Floating labels' example is only supported on Chrome, Safari and Firefox. On Edge and IE the label is displayed always and any text input overlaps the label which makes it unreadable.

The fix here targets Edge and IE and makes the form behave normally, the labels are hidden and the placeholder color is standard.

diff --git a/docs/4.1/examples/floating-labels/floating-labels.css b/docs/4.1/examples/floating-labels/floating-labels.css
index 2c1d91bf36ada55210a5290c05132bbcdf8e7209..a5634ab5f466fcfe80f01b4d47ce2d9a98ae669f 100644 (file)
--- a/docs/4.1/examples/floating-labels/floating-labels.css
+++ b/docs/4.1/examples/floating-labels/floating-labels.css
@@ -80,3 +80,25 @@ body {
   font-size: 12px;
   color: #777;
 }
+
+/* Fallback for Edge
+-------------------------------------------------- */
+@supports (-ms-ime-align: auto) {
+  .form-label-group > label {
+    display: none;
+  }
+  .form-label-group input::-ms-input-placeholder {
+    color: #777;
+  }
+}
+
+/* Fallback for IE
+-------------------------------------------------- */
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .form-label-group > label {
+    display: none;
+  }
+  .form-label-group input:-ms-input-placeholder {
+    color: #777;
+  }
+}