mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-17 14:54:30 +01:00
Merge pull request #13745 from twbs/fix-13281
set not-allowed cursor on disabled radio+checkbox labels
This commit is contained in:
commit
7231efabde
20
dist/css/bootstrap.css
vendored
20
dist/css/bootstrap.css
vendored
@ -2440,18 +2440,24 @@ input[type="month"].input-lg {
|
||||
}
|
||||
input[type="radio"][disabled],
|
||||
input[type="checkbox"][disabled],
|
||||
.radio[disabled],
|
||||
.radio-inline[disabled],
|
||||
.checkbox[disabled],
|
||||
.checkbox-inline[disabled],
|
||||
input[type="radio"].disabled,
|
||||
input[type="checkbox"].disabled,
|
||||
fieldset[disabled] input[type="radio"],
|
||||
fieldset[disabled] input[type="checkbox"],
|
||||
fieldset[disabled] .radio,
|
||||
fieldset[disabled] input[type="checkbox"] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.radio-inline.disabled,
|
||||
.checkbox-inline.disabled,
|
||||
fieldset[disabled] .radio-inline,
|
||||
fieldset[disabled] .checkbox,
|
||||
fieldset[disabled] .checkbox-inline {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.radio.disabled label,
|
||||
.checkbox.disabled label,
|
||||
fieldset[disabled] .radio label,
|
||||
fieldset[disabled] .checkbox label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.input-sm {
|
||||
height: 30px;
|
||||
padding: 5px 10px;
|
||||
|
@ -207,7 +207,8 @@
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Checkboxes and radios</h3>
|
||||
<p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
|
||||
<p>Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
|
||||
<p>A checkbox or radio with the <code>disabled</code> attribute will be styled appropriately. To have the <code><label></code> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the <code>.disabled</code> class to your <code>.radio</code>, <code>.radio-inline</code>, <code>.checkbox</code>, <code>.checkbox-inline</code>, or <code><fieldset></code>.</p>
|
||||
<h4>Default (stacked)</h4>
|
||||
<div class="bs-example">
|
||||
<form role="form">
|
||||
@ -217,6 +218,12 @@
|
||||
Option one is this and that—be sure to include why it's great
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox disabled">
|
||||
<label>
|
||||
<input type="checkbox" value="" disabled>
|
||||
Option two is disabled
|
||||
</label>
|
||||
</div>
|
||||
<br>
|
||||
<div class="radio">
|
||||
<label>
|
||||
@ -230,6 +237,12 @@
|
||||
Option two can be something else and selecting it will deselect option one
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio disabled">
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
|
||||
Option three is disabled
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div><!-- /.bs-example -->
|
||||
{% highlight html %}
|
||||
@ -239,6 +252,12 @@
|
||||
Option one is this and that—be sure to include why it's great
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox disabled">
|
||||
<label>
|
||||
<input type="checkbox" value="" disabled>
|
||||
Option two is disabled
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="radio">
|
||||
<label>
|
||||
@ -252,6 +271,12 @@
|
||||
Option two can be something else and selecting it will deselect option one
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio disabled">
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
|
||||
Option three is disabled
|
||||
</label>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h4>Inline checkboxes and radios</h4>
|
||||
|
@ -247,19 +247,35 @@ input[type="month"] {
|
||||
}
|
||||
|
||||
// Apply same disabled cursor tweak as for inputs
|
||||
// Some special care is needed because <label>s don't inherit their parent's `cursor`.
|
||||
//
|
||||
// Note: Neither radios nor checkboxes can be readonly.
|
||||
input[type="radio"],
|
||||
input[type="checkbox"],
|
||||
.radio,
|
||||
.radio-inline,
|
||||
.checkbox,
|
||||
.checkbox-inline {
|
||||
input[type="checkbox"] {
|
||||
&[disabled],
|
||||
&.disabled,
|
||||
fieldset[disabled] & {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
// These classes are used directly on <label>s
|
||||
.radio-inline,
|
||||
.checkbox-inline {
|
||||
&.disabled,
|
||||
fieldset[disabled] & {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
// These classes are used on elements with <label> descendants
|
||||
.radio,
|
||||
.checkbox {
|
||||
&.disabled,
|
||||
fieldset[disabled] & {
|
||||
label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form control sizing
|
||||
|
Loading…
x
Reference in New Issue
Block a user