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 {
position: relative;
@ -30,19 +42,17 @@
&:focus,
&:not(:placeholder-shown) {
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
@include form-floating-active-input-styles();
}
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
&:-webkit-autofill {
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
@include form-floating-active-input-styles();
}
}
> .form-select {
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
@include form-floating-active-input-styles();
}
> .form-control:focus,
@ -50,15 +60,14 @@
> .form-control-plaintext,
> .form-select {
~ label {
opacity: $form-floating-label-opacity;
transform: $form-floating-label-transform;
@include form-floating-active-label-styles();
}
}
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
> .form-control:-webkit-autofill {
~ label {
opacity: $form-floating-label-opacity;
transform: $form-floating-label-transform;
@include form-floating-active-label-styles();
}
}
@ -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>
{{< /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
When working with the Bootstrap grid system, be sure to place form elements within column classes.