aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--site/docs/4.5/examples/floating-labels/floating-labels.css36
1 files changed, 28 insertions, 8 deletions
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 1abf4c44c..079a66652 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;
}