diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index e8c2b1fc207c0e3602bb2ea4ac60c9bd89af7f8f..83fec25aeb5e0ce5de6e6e2135d91680b9fc1bf4 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1127,7 +1127,10 @@ select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
-textarea[readonly] {
+textarea[readonly],
+fieldset[disabled] input,
+fieldset[disabled] select,
+fieldset[disabled] textarea {
cursor: not-allowed;
background-color: #eeeeee;
}
@@ -1135,7 +1138,9 @@ textarea[readonly] {
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
-input[type="checkbox"][readonly] {
+input[type="checkbox"][readonly],
+fieldset[disabled] input[type="radio"],
+fieldset[disabled] input[type="checkbox"] {
background-color: transparent;
}
@@ -2583,7 +2588,8 @@ button.close {
}
.btn.disabled,
-.btn[disabled] {
+.btn[disabled],
+fieldset[disabled] .btn {
cursor: default;
opacity: 0.65;
filter: alpha(opacity=65);
@@ -2753,7 +2759,8 @@ input[type="button"].btn-block {
.btn-link,
.btn-link:active,
-.btn-link[disabled] {
+.btn-link[disabled],
+fieldset[disabled] .btn-link {
background-color: transparent;
background-image: none;
-webkit-box-shadow: none;
@@ -2773,7 +2780,8 @@ input[type="button"].btn-block {
background-color: transparent;
}
-.btn-link[disabled]:hover {
+.btn-link[disabled]:hover,
+fieldset[disabled] .btn-link:hover {
color: #333333;
text-decoration: none;
}
diff --git a/docs/css.html b/docs/css.html
index fdf1fe5958859f21f028923f56111baee804e546..3ad55d08039b9cb91823d7b41993e537610a5402 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1649,6 +1649,44 @@ For example, <code><section></code> should be wrapped as inlin
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
</pre>
+ <h3>Disabled fieldsets</h3>
+ <p>Add the <code>disabled</code> attribute on a <code>fieldset</code> to disable all the controls within the fieldset at once.</p>
+ <form class="bs-docs-example form-inline">
+ <fieldset disabled>
+ <input type="text" class="span4" placeholder="These controls are all disabled just">
+ <select class="span4">
+ <option>by being under a disabled fieldset</option>
+ </select>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> Can't check this
+ </label>
+ </div>
+ <button type="submit" class="btn btn-primary">Submit</button>
+ </fieldset>
+ </form>
+<pre class="prettyprint linenums">
+<form class="form-inline">
+ <fieldset disabled>
+ <input type="text" class="span4" placeholder="These controls are all disabled just">
+ <select class="span4">
+ <option>by being under a disabled fieldset</option>
+ </select>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> Can't check this
+ </label>
+ </div>
+ <button type="submit" class="btn btn-primary">Submit</button>
+ </fieldset>
+</form>
+</pre>
+ <p>
+ <span class="label label-info">Heads up!</span>
+ Contrary to the HTML5 spec, form controls within a <code>fieldset</code>'s <code>legend</code> will also be disabled.<br>
+ Also, <code><a></code> buttons within a <code>fieldset[disabled]</code> will be styled like they each had the <code>.disabled</code> class, but this only affects aesthetics; you must use custom JavaScript to actually make such links non-functional.
+ </p>
+
<h3>Validation states</h3>
<p>Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p>
diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache
index 78bf7febf23ccaedccb12534cb10855757390d14..0e39c80de0d9c31e9b5db151572a68a08d371b63 100644
--- a/docs/templates/pages/css.mustache
+++ b/docs/templates/pages/css.mustache
@@ -1589,6 +1589,44 @@ For example, <code><section></code> should be wrapped as inlin
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
</pre>
+ <h3>Disabled fieldsets</h3>
+ <p>Add the <code>disabled</code> attribute on a <code>fieldset</code> to disable all the controls within the fieldset at once.</p>
+ <form class="bs-docs-example form-inline">
+ <fieldset disabled>
+ <input type="text" class="span4" placeholder="These controls are all disabled just">
+ <select class="span4">
+ <option>by being under a disabled fieldset</option>
+ </select>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> Can't check this
+ </label>
+ </div>
+ <button type="submit" class="btn btn-primary">Submit</button>
+ </fieldset>
+ </form>
+<pre class="prettyprint linenums">
+<form class="form-inline">
+ <fieldset disabled>
+ <input type="text" class="span4" placeholder="These controls are all disabled just">
+ <select class="span4">
+ <option>by being under a disabled fieldset</option>
+ </select>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> Can't check this
+ </label>
+ </div>
+ <button type="submit" class="btn btn-primary">Submit</button>
+ </fieldset>
+</form>
+</pre>
+ <p>
+ <span class="label label-info">Heads up!</span>
+ Contrary to the HTML5 spec, form controls within a <code>fieldset</code>'s <code>legend</code> will also be disabled.<br>
+ Also, <code><a></code> buttons within a <code>fieldset[disabled]</code> will be styled like they each had the <code>.disabled</code> class, but this only affects aesthetics; you must use custom JavaScript to actually make such links non-functional.
+ </p>
+
<h3>Validation states</h3>
<p>Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p>
diff --git a/less/buttons.less b/less/buttons.less
index d35b7f90118e451676e1604f211f70ea04665c9e..14de3529ca0d08d801d78a42235ec99699b29651 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -39,7 +39,8 @@
}
&.disabled,
- &[disabled] {
+ &[disabled],
+ fieldset[disabled] & {
cursor: default;
.opacity(65);
.box-shadow(none);
@@ -138,7 +139,8 @@ input[type="button"] {
// Make a button look and behave like a link
.btn-link,
.btn-link:active,
-.btn-link[disabled] {
+.btn-link[disabled],
+fieldset[disabled] .btn-link {
background-color: transparent;
background-image: none;
.box-shadow(none);
@@ -154,7 +156,12 @@ input[type="button"] {
text-decoration: underline;
background-color: transparent;
}
-.btn-link[disabled]:hover {
- color: @grayDark;
- text-decoration: none;
+.btn-link {
+ &[disabled],
+ fieldset[disabled] & {
+ &:hover {
+ color: @grayDark;
+ text-decoration: none;
+ }
+ }
}
diff --git a/less/forms.less b/less/forms.less
index 3c44278ccc4c05deff647d336a2771f4b2d71130..8fa9854151f39f34275c6bf2e84b1eed3a1ff1f7 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -331,21 +331,24 @@ textarea[class*="span"],
// --------------
// Disabled and read-only inputs
-input[disabled],
-select[disabled],
-textarea[disabled],
-input[readonly],
-select[readonly],
-textarea[readonly] {
- cursor: not-allowed;
- background-color: @input-background-disabled;
+input,
+select,
+textarea {
+ &[disabled],
+ &[readonly],
+ fieldset[disabled] & {
+ cursor: not-allowed;
+ background-color: @input-background-disabled;
+ }
}
// Explicitly reset the colors here
-input[type="radio"][disabled],
-input[type="checkbox"][disabled],
-input[type="radio"][readonly],
-input[type="checkbox"][readonly] {
- background-color: transparent;
+input[type="radio"],
+input[type="checkbox"] {
+ &[disabled],
+ &[readonly],
+ fieldset[disabled] & {
+ background-color: transparent;
+ }
}
diff --git a/less/mixins.less b/less/mixins.less
index bdd8cf1e044e0d53eed9a631b6e469b050a4d84b..ebfce5f912d50421edae8419760bd6a4ee2c8a7a 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -415,8 +415,8 @@
&:active,
&.active {
color: @text-color;
- background-position: 0 -15px;
background-color: @background-end;
+ background-position: 0 -15px;
}
&:active,
&.active {