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:
parent
4308b67e59
commit
0853778eba
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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.
|
||||
|
Loading…
Reference in New Issue
Block a user