diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index e8c2b1fc20..83fec25aeb 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 fdf1fe5958..3ad55d0803 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>
+ Disabled fieldsets
+ Add the disabled attribute on a fieldset to disable all the controls within the fieldset at once.
+
+
+<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>
+
+
+ Heads up!
+ Contrary to the HTML5 spec, form controls within a fieldset's legend will also be disabled.
+ Also, <a> buttons within a fieldset[disabled] will be styled like they each had the .disabled class, but this only affects aesthetics; you must use custom JavaScript to actually make such links non-functional.
+
+
Validation states
Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.
diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache
index 78bf7febf2..0e39c80de0 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>
+ Disabled fieldsets
+ Add the disabled attribute on a fieldset to disable all the controls within the fieldset at once.
+
+
+<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>
+
+
+ Heads up!
+ Contrary to the HTML5 spec, form controls within a fieldset's legend will also be disabled.
+ Also, <a> buttons within a fieldset[disabled] will be styled like they each had the .disabled class, but this only affects aesthetics; you must use custom JavaScript to actually make such links non-functional.
+
+
Validation states
Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.
diff --git a/less/buttons.less b/less/buttons.less
index d35b7f9011..14de3529ca 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 3c44278ccc..8fa9854151 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 bdd8cf1e04..ebfce5f912 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 {