diff options
| author | Sebastian Podjasek <[email protected]> | 2022-02-08 21:38:29 +0100 |
|---|---|---|
| committer | GitHub <[email protected]> | 2022-02-08 12:38:29 -0800 |
| commit | 0853778eba886a8ba7be09153df30e677402e69c (patch) | |
| tree | 688cd4cfb7e92ec88c8804127c7e641a108491eb | |
| parent | 4308b67e59bfb47d386c3cc585e4a0fb759f6de6 (diff) | |
| download | bootstrap-0853778eba886a8ba7be09153df30e677402e69c.tar.xz bootstrap-0853778eba886a8ba7be09153df30e677402e69c.zip | |
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 <[email protected]>
Co-authored-by: Mark Otto <[email protected]>
| -rw-r--r-- | scss/forms/_floating-labels.scss | 13 | ||||
| -rw-r--r-- | site/content/docs/5.1/forms/floating-labels.md | 15 |
2 files changed, 25 insertions, 3 deletions
diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss index 2f4295480..4f9fd194b 100644 --- a/scss/forms/_floating-labels.scss +++ b/scss/forms/_floating-labels.scss @@ -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 + } + } } diff --git a/site/content/docs/5.1/forms/floating-labels.md b/site/content/docs/5.1/forms/floating-labels.md index 2ac675204..a19bbdbfe 100644 --- a/site/content/docs/5.1/forms/floating-labels.md +++ b/site/content/docs/5.1/forms/floating-labels.md @@ -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="[email protected]"> + <label for="floatingEmptyPlaintextInput">Empty input</label> +</div> +<div class="form-floating mb-3"> + <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="[email protected]" value="[email protected]"> + <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. |