diff --git a/site/docs/4.5/examples/floating-labels/floating-labels.css b/site/docs/4.5/examples/floating-labels/floating-labels.css index 1abf4c44cc55..079a66652ca4 100644 --- a/site/docs/4.5/examples/floating-labels/floating-labels.css +++ b/site/docs/4.5/examples/floating-labels/floating-labels.css @@ -25,13 +25,13 @@ body { margin-bottom: 1rem; } -.form-label-group > input, -.form-label-group > label { +.form-label-group input, +.form-label-group label { height: 3.125rem; padding: .75rem; } -.form-label-group > label { +.form-label-group label { position: absolute; top: 0; left: 0; @@ -51,15 +51,15 @@ body { color: transparent; } -.form-label-group input:-ms-input-placeholder { +.form-label-group input::-moz-placeholder { color: transparent; } -.form-label-group input::-ms-input-placeholder { +.form-label-group input:-ms-input-placeholder { color: transparent; } -.form-label-group input::-moz-placeholder { +.form-label-group input::-ms-input-placeholder { color: transparent; } @@ -67,6 +67,11 @@ body { color: transparent; } +.form-label-group input:not(:-moz-placeholder-shown) { + padding-top: 1.25rem; + padding-bottom: .25rem; +} + .form-label-group input:not(:-ms-input-placeholder) { padding-top: 1.25rem; padding-bottom: .25rem; @@ -77,6 +82,13 @@ body { padding-bottom: .25rem; } +.form-label-group input:not(:-moz-placeholder-shown) ~ label { + padding-top: .25rem; + padding-bottom: .25rem; + font-size: 12px; + color: #777; +} + .form-label-group input:not(:-ms-input-placeholder) ~ label { padding-top: .25rem; padding-bottom: .25rem; @@ -94,9 +106,17 @@ body { /* Fallback for Edge -------------------------------------------------- */ @supports (-ms-ime-align: auto) { - .form-label-group > label { - display: none; + .form-label-group { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + } + + .form-label-group label { + position: static; } + .form-label-group input::-ms-input-placeholder { color: #777; }