mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-06 04:08:22 +01:00
[Fix Issue #15683] readonly
input should not have a not-allowed cursor
[Fix Issue #15683] `readonly` input should not have a `not-allowed` cursor. Instead, this pull request displays a standard cursor and only displays the not-allowed cursor on disabled items. Revise docs wording to clarify cursor display
This commit is contained in:
parent
a7747dedf2
commit
2dfc58fa5c
@ -528,7 +528,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<h2 id="forms-control-disabled">Disabled state</h2>
|
<h2 id="forms-control-disabled">Disabled state</h2>
|
||||||
<p>Add the <code>disabled</code> boolean attribute on an input to prevent user input and trigger a slightly different look.</p>
|
<p>Add the <code>disabled</code> boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a <code>not-allowed</code> cursor.</p>
|
||||||
<div class="bs-example" data-example-id="text-form-control-disabled">
|
<div class="bs-example" data-example-id="text-form-control-disabled">
|
||||||
<form>
|
<form>
|
||||||
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
|
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
|
||||||
@ -598,7 +598,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<h2 id="forms-control-readonly">Readonly state</h2>
|
<h2 id="forms-control-readonly">Readonly state</h2>
|
||||||
<p>Add the <code>readonly</code> boolean attribute on an input to prevent user input and style the input as disabled.</p>
|
<p>Add the <code>readonly</code> boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.</p>
|
||||||
<div class="bs-example" data-example-id="readonly-text-form-control">
|
<div class="bs-example" data-example-id="readonly-text-form-control">
|
||||||
<form>
|
<form>
|
||||||
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
|
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
|
||||||
|
@ -141,10 +141,14 @@ output {
|
|||||||
&[disabled],
|
&[disabled],
|
||||||
&[readonly],
|
&[readonly],
|
||||||
fieldset[disabled] & {
|
fieldset[disabled] & {
|
||||||
cursor: @cursor-disabled;
|
|
||||||
background-color: @input-bg-disabled;
|
background-color: @input-bg-disabled;
|
||||||
opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
|
opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&[disabled],
|
||||||
|
fieldset[disabled] & {
|
||||||
|
cursor: @cursor-disabled;
|
||||||
|
}
|
||||||
|
|
||||||
// Reset height for `textarea`s
|
// Reset height for `textarea`s
|
||||||
textarea& {
|
textarea& {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user