0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00

Support floating labels on .form-control-plaintext (#32840)

* Support floating labels on `.form-control-plaintext`

* Update floating-labels.md

* Apply suggestions from code review

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <otto@github.com>
This commit is contained in:
Sebastian Podjasek 2022-02-08 21:38:29 +01:00 committed by GitHub
parent 4308b67e59
commit 0853778eba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 3 deletions

View File

@ -2,6 +2,7 @@
position: relative;
> .form-control,
> .form-control-plaintext,
> .form-select {
height: $form-floating-height;
line-height: $form-floating-line-height;
@ -19,8 +20,8 @@
@include transition($form-floating-transition);
}
// stylelint-disable no-duplicate-selectors
> .form-control {
> .form-control,
> .form-control-plaintext {
padding: $form-floating-padding-y $form-floating-padding-x;
&::placeholder {
@ -46,6 +47,7 @@
> .form-control:focus,
> .form-control:not(:placeholder-shown),
> .form-control-plaintext,
> .form-select {
~ label {
opacity: $form-floating-label-opacity;
@ -59,5 +61,10 @@
transform: $form-floating-label-transform;
}
}
// stylelint-enable no-duplicate-selectors
> .form-control-plaintext {
~ label {
border-width: $input-border-width 0; // Required to properly position label text - as explained above
}
}
}

View File

@ -75,6 +75,21 @@ Other than `.form-control`, floating labels are only available on `.form-select`
</div>
{{< /example >}}
## Readonly plaintext
Floating labels also support `.form-control-plaintext`, which can be helpful for toggling from an editable `<input>` to a plaintext value without affecting the page layout.
{{< example >}}
<div class="form-floating mb-3">
<input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="name@example.com">
<label for="floatingEmptyPlaintextInput">Empty input</label>
</div>
<div class="form-floating mb-3">
<input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="name@example.com" value="name@example.com">
<label for="floatingPlaintextInput">Input with value</label>
</div>
{{< /example >}}
## Layout
When working with the Bootstrap grid system, be sure to place form elements within column classes.