Bug 556615 - Make web-form selectbox downarrows look better [r=mfinkle]

mobile/chrome/content/bindings.xml

@@ -8,6 +8,7 @@
 <bindings
     xmlns="http://www.mozilla.org/xbl"
     xmlns:xbl="http://www.mozilla.org/xbl"
+    xmlns:svg="http://www.w3.org/2000/svg"
     xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
   <binding id="autocomplete-aligned" extends="chrome://global/content/bindings/autocomplete.xml#autocomplete">
@@ -1119,4 +1120,12 @@
       </property>
     </implementation>
   </binding>
+
+  <binding id="select-button" display="xul:menu" extends="chrome://global/content/bindings/general.xml#basecontrol">
+    <content>
+      <svg:svg width="14px" height="14px" version="1.1" xmlns="http://www.w3.org/2000/svg">
+        <svg:polyline points="1 1 5 6 9 1" stroke="#414141" stroke-width="2" stroke-linecap="round" fill="transparent" stroke-linejoin="round"/>
+      </svg:svg>
+    </content>
+  </binding>
 </bindings>

mobile/chrome/content/content.css

@@ -151,11 +151,18 @@ html input[type="checkbox"] {
 html select input[type="button"] {
   border-width: 0px !important;
   -moz-border-radius: 0;
-  -moz-background-size: 100% 90%, 14px 14px;
+  -moz-background-size: 100% 90%;
+  color: #414141;
 
-  background-image: -moz-radial-gradient(bottom left, #bbbbbb 40%, #f5f5f5), url(chrome://browser/skin/images/arrowdown-16.png) !important;
-  background-position: -15px center, center center !important;
+  background-image: -moz-radial-gradient(bottom left, #bbbbbb 40%, #f5f5f5) !important;
+  background-position: -15px center !important;
   background-repeat: no-repeat !important;
+  -moz-binding: url("chrome://browser/content/bindings.xml#select-button");
+}
+
+html select input[type="button"] > svg {
+  margin-left: -3px;
+  margin-top: 6px;
 }
 
 html select[size]:focus,