Skip to content

Commit

Permalink
Fixes Edge and IE label overlapping issue (#25919)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
coliff authored and mdo committed Jun 24, 2018
1 parent d78aac0 commit 41ab1c6
Showing 1 changed file with 22 additions and 0 deletions.
22 changes: 22 additions & 0 deletions docs/4.1/examples/floating-labels/floating-labels.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

0 comments on commit 41ab1c6

Please sign in to comment.