mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-25 21:09:06 +02:00
Code Issues Releases Wiki Activity

Add option for always visible floating labels

Browse Source
This commit is contained in:
Mark Otto
2022-04-01 15:13:01 -07:00
committed by Julien Déramond
parent 2eff466b63
commit f0700c7c3c
2 changed files with 48 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
scss/forms/_floating-labels.scss
View File

@@ -1,3 +1,14 @@
// We use mixins instead of placeholders as placeholders would combine the selectors when @extend-ed
@mixin form-floating-active-input-styles() {
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
}
@mixin form-floating-active-label-styles() {
transform: $form-floating-label-transform;
}
.form-floating { .form-floating {
position: relative; position: relative;
@@ -38,19 +49,17 @@
&:focus, &:focus,
&:not(:placeholder-shown) { &:not(:placeholder-shown) {
padding-top: $form-floating-input-padding-t; @include form-floating-active-input-styles();
padding-bottom: $form-floating-input-padding-b;
} }
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
&:-webkit-autofill { &:-webkit-autofill {
padding-top: $form-floating-input-padding-t; @include form-floating-active-input-styles();
padding-bottom: $form-floating-input-padding-b;
} }
} }
> .form-select { > .form-select {
padding-top: $form-floating-input-padding-t; @include form-floating-active-input-styles();
padding-bottom: $form-floating-input-padding-b;
padding-left: $form-floating-padding-x; padding-left: $form-floating-padding-x;
} }
@@ -59,13 +68,13 @@
> .form-control-plaintext, > .form-control-plaintext,
> .form-select { > .form-select {
~ label { ~ label {
transform: $form-floating-label-transform; @include form-floating-active-label-styles();
} }
} }
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
> .form-control:-webkit-autofill { > .form-control:-webkit-autofill {
~ label { ~ label {
transform: $form-floating-label-transform; @include form-floating-active-label-styles();
} }
} }
> textarea:focus, > textarea:focus,
@@ -95,3 +104,21 @@
color: $form-floating-label-disabled-color; color: $form-floating-label-disabled-color;
} }
} }
// Todo in v6: Consider combining this with the .form-control-plaintext rules to reduce some CSS?
.form-floating-always {
> .form-control {
@include form-floating-active-input-styles();
&::placeholder {
color: $input-color;
}
&:focus::placeholder {
color: $input-placeholder-color;
}
}
> label {
@include form-floating-active-label-styles();
}
}

13
site/src/content/docs/forms/floating-labels.mdx
View File

@@ -129,6 +129,19 @@ When using `.input-group` and `.form-floating` along with form validation, the `
</div> </div>
</div>`} /> </div>`} />
## Always floating
Make any `.form-control` always use a floating label with visible placeholder with the `.form-floating-always` modifier class. Visible placeholders use the default input `color` and lighten to the placeholder color on focus. This matches them with other floating labels built with plaintext inputs and selects.
<Example code={`<div class="form-floating form-floating-always mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating form-floating-always">
<input type="password" class="form-control" id="floatingPassword" placeholder="••••••••">
<label for="floatingPassword">Password</label>
</div>`} />
## Layout ## Layout
When working with the Bootstrap grid system, be sure to place form elements within column classes. When working with the Bootstrap grid system, be sure to place form elements within column classes.