more required input tweaks

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 2d2e7be0d6f43130a3f8a7353b72f6486220550e..49e63bd315b4e72bcf5d198a7e8120a0e59530cc 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1588,16 +1588,16 @@ input[type="checkbox"][readonly] {
   border-color: #3a87ad;
 }
 
-input:invalid,
-select:invalid,
-textarea:invalid {
+input:focus:invalid,
+textarea:focus:invalid,
+select:focus:invalid {
   color: #b94a48;
   border-color: #ee5f5b;
 }
 
-input:invalid:focus,
-select:invalid:focus,
-textarea:invalid:focus {
+input:focus:invalid:focus,
+textarea:focus:invalid:focus,
+select:focus:invalid:focus {
   border-color: #e9322d;
   -webkit-box-shadow: 0 0 6px #f8b9b7;
      -moz-box-shadow: 0 0 6px #f8b9b7;

diff --git a/docs/base-css.html b/docs/base-css.html
index ff2325dfa4b3438055e9b9c54cf798c41a2ad52e..816b465c90ed7e44a327ccf98e0ea5ce23e67ee1 100644 (file)
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1571,13 +1571,13 @@ For example, <code><section></code> should be wrapped as inlin
 <input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
 </pre>
 
-          <h3>Required inputs</h3>
-          <p>Style inputs via default browser functionality with <code>:valid</code>.</p>
+          <h3>Invalid inputs</h3>
+          <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code> and add the <code>required</code> attribute.</p>
           <form class="bs-docs-example form-inline">
-            <input class="span4" type="text" value="Required input" required>
+            <input class="span3" type="email" placeholder="test@example.com" required>
           </form>
 <pre class="prettyprint linenums">
-&lt;input class="span4" type="text" placeholder="Required input" required&gt;
+&lt;input class="span3" type="email" required&gt;
 </pre>
 
           <h3>Disabled inputs</h3>

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 1c80f9de0f69207024d2cb98ed119c61f10289af..494086702d65a15510e4cbb7795d5e6a2fc79d49 100644 (file)
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1508,13 +1508,13 @@
 <input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}">
 </pre>
 
-          <h3>{{_i}}Required inputs{{/i}}</h3>
-          <p>{{_i}}Style inputs via default browser functionality with <code>:valid</code>.{{/i}}</p>
+          <h3>{{_i}}Invalid inputs{{/i}}</h3>
+          <p>{{_i}}Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code> and add the <code>required</code> attribute.{{/i}}</p>
           <form class="bs-docs-example form-inline">
-            <input class="span4" type="text" value="{{_i}}Required input{{/i}}" required>
+            <input class="span3" type="email" placeholder="test@example.com" required>
           </form>
 <pre class="prettyprint linenums">
-&lt;input class="span4" type="text" placeholder="{{_i}}Required input{{/i}}" required&gt;
+&lt;input class="span3" type="email" required&gt;
 </pre>
 
           <h3>{{_i}}Disabled inputs{{/i}}</h3>

diff --git a/less/forms.less b/less/forms.less
index 13f9c25f620cb32d40abd461bf2ce20bfbcfc9ab..172ed027dcae6e98735cfd7641a957f874a0437d 100644 (file)
--- a/less/forms.less
+++ b/less/forms.less
@@ -366,14 +366,15 @@ input[type="checkbox"][readonly] {
 
 // HTML5 invalid states
 // Shares styles with the .control-group.error above
-input:invalid,
-select:invalid,
-textarea:invalid {
+input:focus:invalid,
+textarea:focus:invalid,
+select:focus:invalid {
   color: #b94a48;
   border-color: #ee5f5b;
   &:focus {
     border-color: darken(#ee5f5b, 10%);
-    .box-shadow(0 0 6px lighten(#ee5f5b, 20%));
+    @shadow: 0 0 6px lighten(#ee5f5b, 20%);
+    .box-shadow(@shadow);
   }
 }