fixes #4526: box-shadow on .radio and .checkbox if .control-group has…

… a form field state
twbs · Aug 21, 2012 · 190d3c9 · 190d3c9
1 parent e2ecd2d
commit 190d3c9
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
@@ -1301,14 +1301,17 @@ input[type="checkbox"][readonly] {
 .control-group.warning select,
 .control-group.warning textarea {
   color: #c09853;
+}
+
+.control-group.warning input,
+.control-group.warning select,
+.control-group.warning textarea {
   border-color: #c09853;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 
-.control-group.warning .checkbox:focus,
-.control-group.warning .radio:focus,
 .control-group.warning input:focus,
 .control-group.warning select:focus,
 .control-group.warning textarea:focus {
@@ -1337,14 +1340,17 @@ input[type="checkbox"][readonly] {
 .control-group.error select,
 .control-group.error textarea {
   color: #b94a48;
+}
+
+.control-group.error input,
+.control-group.error select,
+.control-group.error textarea {
   border-color: #b94a48;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 
-.control-group.error .checkbox:focus,
-.control-group.error .radio:focus,
 .control-group.error input:focus,
 .control-group.error select:focus,
 .control-group.error textarea:focus {
@@ -1373,14 +1379,17 @@ input[type="checkbox"][readonly] {
 .control-group.success select,
 .control-group.success textarea {
   color: #468847;
+}
+
+.control-group.success input,
+.control-group.success select,
+.control-group.success textarea {
   border-color: #468847;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 
-.control-group.success .checkbox:focus,
-.control-group.success .radio:focus,
 .control-group.success input:focus,
 .control-group.success select:focus,
 .control-group.success textarea:focus {

diff --git a/less/mixins.less b/less/mixins.less
@@ -175,6 +175,10 @@
   select,
   textarea {
     color: @textColor;
+  }
+  input,
+  select,
+  textarea {
     border-color: @borderColor;
     .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
     &:focus {

diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html
@@ -597,6 +597,19 @@ <h4>Fluid grid sizing</h4>
   <h1>Forms</h1>
 </div>
 
+<h4>Horizontal form errors</h4>
+<form class="form-horizontal">
+  <div class="control-group error">
+    <label class="control-label" for="inputError">Radio with error</label>
+    <div class="controls">
+      <label class="radio">
+        <input type="radio" id="inputError"> Oh hai
+      </label>
+      <span class="help-inline">Please correct the error</span>
+    </div>
+  </div>
+</form>
+
 <div class="row">
   <div class="span4">
     <h4>Prepend and append on inputs</h4>