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 {
position: relative;
@@ -38,19 +49,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();
padding-left: $form-floating-padding-x;
}
@@ -59,13 +68,13 @@
> .form-control-plaintext,
> .form-select {
~ label {
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 {
transform: $form-floating-label-transform;
@include form-floating-active-label-styles();
}
}
> textarea:focus,
@@ -95,3 +104,21 @@
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>`} />
## 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
When working with the Bootstrap grid system, be sure to place form elements within column classes.