rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Fix disabled floating labels and add some examples of it in the docs (#37299)

Browse Source 
* Fix disabled floating labels and add some examples of it in the docs

* Add disabled custom height textarea
This commit is contained in:
Julien Déramond 2022-10-30 02:30:59 +02:00 committed by GitHub
parent 678dde8f98
commit 06bed9b45a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scss/forms/_floating-labels.scss
View File

@ -1,7 +1,7 @@
.form-floating {
position: relative;
&::before {
&::before:not(.form-control:disabled) {
position: absolute;
top: $input-border-width;
left: $input-border-width;

28
site/content/docs/5.2/forms/floating-labels.md
View File

@ -75,6 +75,34 @@ Other than `.form-control`, floating labels are only available on `.form-select`
</div>
{{< /example >}}
## Disabled
Add the `disabled` boolean attribute on an input, a textarea or a select to give it a grayed out appearance, remove pointer events, and prevent focusing.
{{< example >}}
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInputDisabled" placeholder="name@example.com" disabled>
<label for="floatingInputDisabled">Email address</label>
</div>
<div class="form-floating mb-3">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled" disabled></textarea>
<label for="floatingTextareaDisabled">Comments</label>
</div>
<div class="form-floating mb-3">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2Disabled" style="height: 100px" disabled></textarea>
<label for="floatingTextarea2Disabled">Comments</label>
</div>
<div class="form-floating">
<select class="form-select" id="floatingSelectDisabled" aria-label="Floating label disabled select example" disabled>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectDisabled">Works with selects</label>
</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.