Fix for IE9, since it doesn't support linear gradient

Author: nateps

public/form.css

@@ -46,9 +46,11 @@ button,
 [type="checkbox"]+i,
 [type="radio"]+i,
 select+i {
+  background: rgba(0,0,0,0.35);
   background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,0.25)), to(rgba(0,0,0,0.45)));
-  background: -o-linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.45));
   background: -moz-linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.45));
+  background: -ms-linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.45));
+  background: -o-linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.45));
   background: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.45));
   -moz-background-origin: border;
   background-origin: border-box;
@@ -173,6 +175,12 @@ select {
   z-index: 1;
   width: 120%;
 }
+@media (-webkit-min-device-pixel-ratio: 0) {
+  select {
+    padding: 0 21px 0 6px;
+    width: auto;
+  }
+}
 :-o-prefocus,
 .select>i {
   float: left;
@@ -187,12 +195,6 @@ select {
 select:focus {
   background: transparent;
 }
-@media (-webkit-min-device-pixel-ratio: 0) {
-  select {
-    padding: 0 21px 0 6px;
-    width: auto;
-  }
-}
 select+i {
   position: absolute;
   top: 0;

src/form.styl

@@ -68,9 +68,11 @@ textarea {
   box-shadow: inset 0 1px darken(text-back, 5%), 0 1px rgba(#fff, .3), inset 0 800px 1px -400px text-back;
 }
 button,[type="submit"],[type="checkbox"]+i,[type="radio"]+i,select+i {
+  background: border-med;
   background: -webkit-gradient(linear,0 0,0 100%,from(border-light),to(border-dark));
-  background: -o-linear-gradient(border-light, border-dark);
   background: -moz-linear-gradient(border-light, border-dark);
+  background: -ms-linear-gradient(border-light, border-dark); 
+  background: -o-linear-gradient(border-light, border-dark);
   background: linear-gradient(border-light, border-dark);
   -moz-background-origin: border;
   background-origin: border-box;
@@ -127,6 +129,9 @@ button:focus:active,[type="submit"]:focus:active,[type="checkbox"]:focus:active+
   width: 11px;
 }
 @media (-webkit-min-device-pixel-ratio: 2) {
+  /* This uses an svg file for the check on an iOS retina screen. Unfortunately,
+  the Android browser can't render SVGs. A cleaner check for SVG support would
+  be better here. */
   [type="checkbox"]+i:after {
     background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjExcHgiIGhlaWdodD0iMTJweCI+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTksMS40MWMtMC4wMywwLjA0LTAuMDgsMC4wNi0wLjEsMC4xTDMuOTcsOUwxLjk4LDYuODZDMS41NSw2LjQsMC44Myw2LjM3LDAuMzcsNi44Qy0wLjEsNy4yMy0wLjEyLDcuOTYsMC4zMSw4LjQybDIuOTgsMy4yMUMzLjUsMTEuODcsMy44MSwxMiw0LjEyLDEyYzAuMDMsMCwwLjA2LDAsMC4xLDBjMC4zNS0wLjAzLDAuNjctMC4yMiwwLjg2LTAuNTFMOSw1LjUzVjEuNDF6Ii8+PHBhdGggZD0iTTQuMTIsMTFjLTAuMzIsMC0wLjYyLTAuMTMtMC44NC0wLjM3TDAuMzEsNy40MkMtMC4xMiw2Ljk2LTAuMSw2LjI0LDAuMzcsNS44YzAuNDYtMC40MywxLjE5LTAuNCwxLjYyLDAuMDZMMy45Nyw4TDguOSwwLjUyYzAuMzUtMC41MywxLjA2LTAuNjgsMS41OS0wLjMzYzAuNTMsMC4zNSwwLjY3LDEuMDYsMC4zMywxLjU5bC01LjczLDguNzFjLTAuMTksMC4yOS0wLjUxLDAuNDgtMC44NiwwLjUxQzQuMTksMTEsNC4xNiwxMSw0LjEyLDExeiIvPjwvc3ZnPg==") no-repeat;
     height: 12px;
@@ -168,6 +173,15 @@ select {
   /* Select needs to be at least 17px wider than the container to hide the arrow */
   width: 120%;
 }
+@media (-webkit-min-device-pixel-ratio: 0) {
+  /* Should be webkit only */
+  select {
+    /* Only webkit supports fully resetting a select box */
+    padding: 0 21px 0 6px;
+    width: auto;
+  }
+}
+
 :-o-prefocus, .select>i {
   /* Fix bug in Opera 10 */
   float: left;
@@ -182,13 +196,6 @@ select {
 :-o-prefocus, select:focus {
   background: transparent;
 }
-@media (-webkit-min-device-pixel-ratio: 0) {
-  select {
-    /* Only WebKit supports fully resetting a select box */
-    padding: 0 21px 0 6px;
-    width: auto;
-  }
-}
 select+i {
   position: absolute;
   top: 0;