Update markup for buttons in an input group to separate the button from the wrapper...

diff --git a/docs/pages/forms.md b/docs/pages/forms.md
index e7e153967a4096847677945bbf9832b88c5ab5a1..a04d1b0bc389c9505e4e6a6b90ecbbe111459c9c 100644 (file)
--- a/docs/pages/forms.md
+++ b/docs/pages/forms.md
@@ -189,13 +189,15 @@ To attach extra text or controls to the left or right of an input field, wrap th
 
 - `.input-group-field` on the text field.
 - `.input-group-label` on a text label.
-- `.input-group-button` on a button.
+- `.input-group-button` on a button. **Place the button inside this wrapper.**
 
 ```html_example
 <div class="input-group">
   <span class="input-group-label">$</span>
-  <input class="input-group-field" type="url">
-  <a class="input-group-button button">Submit</a>
+  <input class="input-group-field" type="number">
+  <div class="input-group-button">
+    <input type="submit" class="button" value="Submit">
+  </div>
 </div>
 ```
 

diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index 4ba26c76355e51f91c0c24e2b3ec4893f1a2d0fd..ed2179cfb6ca006f3639fc53a28ea765c0d1ce72 100644 (file)
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -66,5 +66,11 @@ $input-prefix-padding: 1rem !default;
     padding-bottom: 0;
     text-align: center;
     width: 1%;
+
+    a,
+    input,
+    button {
+      margin: 0;
+    }
   }
 }