Properly override normalize.css' `box-sizing` for all browsers.

Fix #481.
11 years ago · 415867d239
5 changed files with 12 additions and 5 deletions
--- a/dist/css/ratchet.css
+++ b/dist/css/ratchet.css
@ -856,7 +856,9 @@ input[type="color"] {
 }

 input[type="search"] {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
  padding: 0 10px;
  font-size: 16px;
  border-radius: 20px;
--- a/dist/css/ratchet.min.css
+++ b/dist/css/ratchet.min.css
--- a/docs/dist/css/ratchet.css
+++ b/docs/dist/css/ratchet.css
@ -856,7 +856,9 @@ input[type="color"] {
 }

 input[type="search"] {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
  padding: 0 10px;
  font-size: 16px;
  border-radius: 20px;
--- a/docs/dist/css/ratchet.min.css
+++ b/docs/dist/css/ratchet.min.css
--- a/sass/forms.scss
+++ b/sass/forms.scss
@ -45,7 +45,10 @@ input[type="search"] {
  padding: 0 10px;
  font-size: 16px;
  border-radius: 20px;
-  box-sizing: border-box; // Override content-box in normalize
+  // Override content-box in normalize
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
 }
 input[type="search"]:focus {
  text-align: left;