for html5 style all inputs -- then unstyle checkbox, radio, button, reset, submit

diff --git a/bootstrap-1.2.0.css b/bootstrap-1.2.0.css
index 98f1b20db3dd93a81f84cc65f90b50b810702c60..a24380d914a19d2772a58c01e9307f130d358b78 100644 (file)
--- a/bootstrap-1.2.0.css
+++ b/bootstrap-1.2.0.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Wed Aug 31 10:55:48 PDT 2011
+ * Date: Thu Sep  1 22:52:35 PDT 2011
  */
 /* Reset.less
  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here      that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -657,8 +657,7 @@ div.input {
 input[type=checkbox], input[type=radio] {
   cursor: pointer;
 }
-input[type=text],
-input[type=password],
+input,
 textarea,
 select,
 .uneditable-input {
@@ -674,6 +673,24 @@ select,
   -moz-border-radius: 3px;
   border-radius: 3px;
 }
+input[type=checkbox], input[type=radio] {
+  width: auto;
+  padding: 0;
+  line-height: normal;
+  height: auto;
+  margin: 3px 0;
+}
+input[type=file] {
+  border: 0;
+  padding: 0;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+input[type=button], input[type=reset], input[type=submit] {
+  width: auto;
+  height: auto;
+}
 select, input[type=file] {
   height: 27px;
   line-height: 27px;
@@ -695,10 +712,7 @@ textarea {
 ::-webkit-input-placeholder {
   color: #bfbfbf;
 }
-input[type=text],
-input[type=password],
-select,
-textarea {
+input, select, textarea {
   -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
   -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
   transition: border linear 0.2s, box-shadow linear 0.2s;
@@ -706,7 +720,7 @@ textarea {
   -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
 }
-input[type=text]:focus, input[type=password]:focus, textarea:focus {
+input:focus, textarea:focus {
   outline: none;
   border-color: rgba(82, 168, 236, 0.8);
   -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
@@ -724,13 +738,13 @@ form div.error {
 form div.error > label, form div.error span.help-inline, form div.error span.help-block {
   color: #9d261d;
 }
-form div.error input[type=text], form div.error input[type=password], form div.error textarea {
+form div.error input, form div.error textarea {
   border-color: #c87872;
   -webkit-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
   -moz-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
   box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
 }
-form div.error input[type=text]:focus, form div.error input[type=password]:focus, form div.error textarea:focus {
+form div.error input:focus, form div.error textarea:focus {
   border-color: #b9554d;
   -webkit-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
   -moz-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
@@ -827,7 +841,7 @@ input[readonly]:focus, textarea[readonly]:focus, input.disabled {
 .inline-inputs {
   color: #808080;
 }
-.inline-inputs span, .inline-inputs input[type=text] {
+.inline-inputs span, .inline-inputs input {
   display: inline-block;
 }
 .inline-inputs input.mini {
@@ -839,10 +853,7 @@ input[readonly]:focus, textarea[readonly]:focus, input.disabled {
 .inline-inputs span {
   padding: 0 2px 0 1px;
 }
-.input-prepend input[type=text],
-.input-append input[type=text],
-.input-prepend input[type=password],
-.input-append input[type=password] {
+.input-prepend input, .input-append input {
   -webkit-border-radius: 0 3px 3px 0;
   -moz-border-radius: 0 3px 3px 0;
   border-radius: 0 3px 3px 0;
@@ -875,7 +886,7 @@ input[readonly]:focus, textarea[readonly]:focus, input.disabled {
   /* IE6-7 */
 
 }
-.input-append input[type=text], .input-append input[type=password] {
+.input-append input {
   float: left;
   -webkit-border-radius: 3px 0 0 3px;
   -moz-border-radius: 3px 0 0 3px;

diff --git a/bootstrap-1.2.0.min.css b/bootstrap-1.2.0.min.css
index db834b105fffdb1c50475a29e64ae91e26f73683..f2c3789fce2da906072c340c8024a01b1e0db1b6 100644 (file)
--- a/bootstrap-1.2.0.min.css
+++ b/bootstrap-1.2.0.min.css
@@ -107,16 +107,19 @@ label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-se
 label{padding-top:6px;font-size:13px;line-height:18px;float:left;width:130px;text-align:right;color:#404040;}
 div.input{margin-left:150px;}
 input[type=checkbox],input[type=radio]{cursor:pointer;}
-input[type=text],input[type=password],textarea,select,.uneditable-input{display:inline-block;width:210px;padding:4px;font-size:13px;line-height:18px;height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
+input,textarea,select,.uneditable-input{display:inline-block;width:210px;padding:4px;font-size:13px;line-height:18px;height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
+input[type=checkbox],input[type=radio]{width:auto;padding:0;line-height:normal;height:auto;margin:3px 0;}
+input[type=file]{border:0;padding:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
+input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;}
 select,input[type=file]{height:27px;line-height:27px;}
 textarea{height:auto;}
 .uneditable-input{background-color:#eee;display:block;border-color:#ccc;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.075);}
 :-moz-placeholder{color:#bfbfbf;}
 ::-webkit-input-placeholder{color:#bfbfbf;}
-input[type=text],input[type=password],select,textarea{-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);}
-input[type=text]:focus,input[type=password]:focus,textarea:focus{outline:none;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);}
+input,select,textarea{-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);}
+input:focus,textarea:focus{outline:none;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);}
 form div.error{background:#fae5e3;padding:10px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}form div.error>label,form div.error span.help-inline,form div.error span.help-block{color:#9d261d;}
-form div.error input[type=text],form div.error input[type=password],form div.error textarea{border-color:#c87872;-webkit-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);-moz-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);box-shadow:0 0 3px rgba(171, 41, 32, 0.25);}form div.error input[type=text]:focus,form div.error input[type=password]:focus,form div.error textarea:focus{border-color:#b9554d;-webkit-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);-moz-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);box-shadow:0 0 6px rgba(171, 41, 32, 0.5);}
+form div.error input,form div.error textarea{border-color:#c87872;-webkit-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);-moz-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);box-shadow:0 0 3px rgba(171, 41, 32, 0.25);}form div.error input:focus,form div.error textarea:focus{border-color:#b9554d;-webkit-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);-moz-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);box-shadow:0 0 6px rgba(171, 41, 32, 0.5);}
 form div.error .input-prepend span.add-on,form div.error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;}
 .input-mini,input.mini,textarea.mini,select.mini{width:60px;}
 .input-small,input.small,textarea.small,select.small{width:90px;}
@@ -130,15 +133,15 @@ input[readonly]:focus,textarea[readonly]:focus,input.disabled{background:#f5f5f5
 .help-inline,.help-block{font-size:12px;line-height:18px;color:#bfbfbf;}
 .help-inline{padding-left:5px;*position:relative;*top:-5px;}
 .help-block{display:block;max-width:600px;}
-.inline-inputs{color:#808080;}.inline-inputs span,.inline-inputs input[type=text]{display:inline-block;}
+.inline-inputs{color:#808080;}.inline-inputs span,.inline-inputs input{display:inline-block;}
 .inline-inputs input.mini{width:60px;}
 .inline-inputs input.small{width:90px;}
 .inline-inputs span{padding:0 2px 0 1px;}
-.input-prepend input[type=text],.input-append input[type=text],.input-prepend input[type=password],.input-append input[type=password]{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
+.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
 .input-prepend .add-on,.input-append .add-on{background:#f5f5f5;float:left;display:block;width:auto;min-width:16px;padding:4px 4px 4px 5px;color:#bfbfbf;font-weight:normal;line-height:18px;height:18px;text-align:center;text-shadow:0 1px 0 #fff;border:1px solid #ccc;border-right-width:0;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
 .input-prepend .active,.input-append .active{background:#a9dba9;border-color:#46a546;}
 .input-prepend .add-on{*margin-top:1px;}
-.input-append input[type=text],.input-append input[type=password]{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
+.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
 .input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;border-right-width:1px;border-left-width:0;}
 .inputs-list{margin:0 0 5px;width:100%;}.inputs-list li{display:block;padding:0;width:100%;}.inputs-list li label{display:block;float:none;width:auto;padding:0;line-height:18px;text-align:left;white-space:normal;}.inputs-list li label strong{color:#808080;}
 .inputs-list li label small{font-size:12px;font-weight:normal;}

diff --git a/docs/index.html b/docs/index.html
index 889bc04378ba96f196bce9d50a9770a6a9ec2a64..78a2b0333e84df9f87f428bcbd608d727923d417 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -763,21 +763,21 @@
               <ul class="inputs-list">
                 <li>
                   <label>
-                    <input type="checkbox" name="optionsCheckboxes" value="option1" />
+                    <input type="radio" checked name="optionsRadios" value="option1" />
                     <span>Option one is this and that&mdash;be sure to include why it’s great</span>
                   </label>
                 </li>
                 <li>
                   <label>
-                    <input type="checkbox" name="optionsCheckboxes" value="option2" />
-                    <span>Option two can also be checked and included in form results</span>
+                    <input type="radio" name="optionsRadios" value="option2" />
+                    <span>Option two can is something else and selecting it will deselect options 1</span>
                   </label>
                 </li>
               </ul>
             </div>
           </div><!-- /clearfix -->
           <div class="actions">
-            <button type="submit" class="btn primary">Save Changes</button>&nbsp;<button type="reset" class="btn">Cancel</button>
+            <input type="submit" class="btn primary" value="Save Changes">&nbsp;<button type="reset" class="btn">Cancel</button>
           </div>
         </fieldset>
       </form>

diff --git a/lib/forms.less b/lib/forms.less
index 88ae08d8a81cfd3a7f46b5887fd0388a1437aa5c..d79decd24100f02b09d4748346df4b42f569c1b2 100644 (file)
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -61,8 +61,7 @@ input[type=radio] {
 }
 
 // Inputs, Textareas, Selects
-input[type=text],
-input[type=password],
+input,
 textarea,
 select,
 .uneditable-input {
@@ -76,14 +75,40 @@ select,
   border: 1px solid #ccc;
   .border-radius(3px);
 }
+
+/* mini reset for non-html5 file types */
+input[type=checkbox],
+input[type=radio] {
+  width: auto;
+  padding: 0;
+  line-height: normal;
+  height: auto;
+  margin: 3px 0;
+}
+
+input[type=file] {
+  border: 0;
+  padding: 0;
+  .box-shadow(none);
+}
+
+input[type=button],
+input[type=reset],
+input[type=submit] {
+  width: auto;
+  height: auto;
+}
+
 select,
 input[type=file] {
   height: @baseline * 1.5;
   line-height: @baseline * 1.5;
 }
+
 textarea {
   height: auto;
 }
+
 .uneditable-input {
   background-color: #eee;
   display: block;
@@ -100,15 +125,13 @@ textarea {
 }
 
 // Focus states
-input[type=text],
-input[type=password],
+input,
 select, textarea {
   @transition: border linear .2s, box-shadow linear .2s;
   .transition(@transition);
   .box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
 }
-input[type=text]:focus,
-input[type=password]:focus,
+input:focus,
 textarea:focus {
   outline: none;
   border-color: rgba(82,168,236,.8);
@@ -128,8 +151,7 @@ form div.error {
   span.help-block {
     color: @red;
   }
-  input[type=text],
-  input[type=password],
+  input,
   textarea {
     border-color: @error-text;
     .box-shadow(0 0 3px rgba(171,41,32,.25));
@@ -221,7 +243,7 @@ input.disabled {
 // Inline Fields (input fields that appear as inline objects
 .inline-inputs {
   color: @gray;
-  span, input[type=text] {
+  span, input {
     display: inline-block;
   }
   input.mini {
@@ -238,8 +260,7 @@ input.disabled {
 // Allow us to put symbols and text within the input field for a cleaner look
 .input-prepend,
 .input-append {
-  input[type=text],
-  input[type=password] {
+  input {
     .border-radius(0 3px 3px 0);
   }
   .add-on {
@@ -270,8 +291,7 @@ input.disabled {
   }
 }
 .input-append {
-  input[type=text],
-  input[type=password] {
+  input {
     float: left;
     .border-radius(3px 0 0 3px);
   }