rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-23 20:54:22 +01:00
Code Issues Actions Packages Releases 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
parent 33992b7d5b
commit 36ee50fa84
2 changed files with 52 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,15 @@
// 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() {
opacity: $form-floating-label-opacity;
transform: $form-floating-label-transform;
}
.form-floating { .form-floating {
position: relative; position: relative;
@ -30,19 +42,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;
} }
> .form-control:focus, > .form-control:focus,
@ -50,15 +60,14 @@
> .form-control-plaintext, > .form-control-plaintext,
> .form-select { > .form-select {
~ label { ~ label {
opacity: $form-floating-label-opacity; @include form-floating-active-label-styles();
transform: $form-floating-label-transform;
} }
} }
// 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 {
opacity: $form-floating-label-opacity; @include form-floating-active-label-styles();
transform: $form-floating-label-transform;
} }
} }
@ -68,3 +77,21 @@
} }
} }
} }
// 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();
}
}

15
site/content/docs/5.1/forms/floating-labels.md
View File

@ -90,6 +90,21 @@ Floating labels also support `.form-control-plaintext`, which can be helpful for
</div> </div>
{{< /example >}} {{< /example >}}
## 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 >}}
<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>
{{< /example >}}
## 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.