rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-04-06 23:57:36 +02:00
Code Issues Actions 11 Packages Releases Activity

Don't style readonly inputs as disabled (#36499)

Browse Source 
* Don't style readonly inputs as disabled

Also remove the Chrome-specific focus styling from readonly plaintext

* Update some docs comments
This commit is contained in:
Mark Otto 2022-06-14 07:25:49 -07:00 committed by GitHub
parent dfe7472431
commit ac0b87b207
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
scss/forms/_form-control.scss
View File

@ -59,13 +59,12 @@
opacity: 1; opacity: 1;
} }
// Disabled and read-only inputs // Disabled inputs
// //
// HTML5 says that controls under a fieldset > legend:first-child won't be // HTML5 says that controls under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty, we // disabled if the fieldset is disabled. Due to implementation difficulty, we
// don't honor that edge case; we style them as disabled anyway. // don't honor that edge case; we style them as disabled anyway.
&:disabled, &:disabled {
&[readonly] {
color: $input-disabled-color; color: $input-disabled-color;
background-color: $input-disabled-bg; background-color: $input-disabled-bg;
border-color: $input-disabled-border-color; border-color: $input-disabled-border-color;
@ -110,6 +109,10 @@
border: solid transparent; border: solid transparent;
border-width: $input-border-width 0; border-width: $input-border-width 0;
&:focus {
outline: 0;
}
&.form-control-sm, &.form-control-sm,
&.form-control-lg { &.form-control-lg {
padding-right: 0; padding-right: 0;

6
site/content/docs/5.2/forms/form-control.md
View File

@ -31,7 +31,7 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`.
## Disabled ## Disabled
Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events. Add the `disabled` boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing.
{{< example >}} {{< example >}}
<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled> <input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
@ -40,7 +40,7 @@ Add the `disabled` boolean attribute on an input to give it a grayed out appeara
## Readonly ## Readonly
Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Add the `readonly` boolean attribute on an input to prevent modification of the input's value. `readonly` inputs can still be focused and selected, while `disabled` inputs cannot.
{{< example >}} {{< example >}}
<input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly> <input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly>
@ -48,7 +48,7 @@ Add the `readonly` boolean attribute on an input to prevent modification of the
## Readonly plain text ## Readonly plain text
If you want to have `<input readonly>` elements in your form styled as plain text, use the `.form-control-plaintext` class to remove the default form field styling and preserve the correct margin and padding. If you want to have `<input readonly>` elements in your form styled as plain text, replace `.form-control` with `.form-control-plaintext` to remove the default form field styling and preserve the correct `margin` and `padding`.
{{< example >}} {{< example >}}
<div class="mb-3 row"> <div class="mb-3 row">