mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-21 20:55:50 +02:00
Code Issues Releases Wiki Activity

Floating labels improvements (#30966)

Browse Source 
* docs(example): floating-labels' better Edge fallback

* docs(example): refactor floating-labels' CSS
This commit is contained in:
Gaël Poupard
2020-06-24 13:11:20 +02:00
committed by XhmikosR
parent 5a9fc2938c
commit 04dbb6c24c
1 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
site/docs/4.5/examples/floating-labels/floating-labels.css
View File

@@ -25,13 +25,13 @@ body {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.form-label-group > input, .form-label-group input,
.form-label-group > label { .form-label-group label {
height: 3.125rem; height: 3.125rem;
padding: .75rem; padding: .75rem;
} }
.form-label-group > label { .form-label-group label {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -51,6 +51,10 @@ body {
color: transparent; color: transparent;
} }
.form-label-group input::-moz-placeholder {
color: transparent;
}
.form-label-group input:-ms-input-placeholder { .form-label-group input:-ms-input-placeholder {
color: transparent; color: transparent;
} }
@@ -59,12 +63,13 @@ body {
color: transparent; color: transparent;
} }
.form-label-group input::-moz-placeholder { .form-label-group input::placeholder {
color: transparent; color: transparent;
} }
.form-label-group input::placeholder { .form-label-group input:not(:-moz-placeholder-shown) {
color: transparent; padding-top: 1.25rem;
padding-bottom: .25rem;
} }
.form-label-group input:not(:-ms-input-placeholder) { .form-label-group input:not(:-ms-input-placeholder) {
@@ -77,6 +82,13 @@ body {
padding-bottom: .25rem; 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 { .form-label-group input:not(:-ms-input-placeholder) ~ label {
padding-top: .25rem; padding-top: .25rem;
padding-bottom: .25rem; padding-bottom: .25rem;
@@ -94,9 +106,17 @@ body {
/* Fallback for Edge /* Fallback for Edge
-------------------------------------------------- */ -------------------------------------------------- */
@supports (-ms-ime-align: auto) { @supports (-ms-ime-align: auto) {
.form-label-group > label { .form-label-group {
display: none; 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 { .form-label-group input::-ms-input-placeholder {
color: #777; color: #777;
} }