title: Down arrow icon in Select Tag
body: <p>Hi I would like to know how I put to the following code:
  <a href="http://jsfiddle.net/Torrecilla/Yv6zx/3/" rel="nofollow noreferrer">http://jsfiddle.net/Torrecilla/Yv6zx/3/</a></p>
  
  <p>This arrow to the right: <a href="https://i.stack.imgur.com/lB0BF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lB0BF.png" alt="select arrow"></a></p>
  
  <p>Is it possible? I could not figure it out</p>
  
  <pre><code>&lt;select name="cats" id="cats"&gt;
    &lt;option value=""&gt;All the Categories&lt;/option&gt;
    &lt;option value=""&gt;Cat 1&lt;/option&gt;
    &lt;option value=""&gt;Cat 2&lt;/option&gt;
    &lt;option value=""&gt;...&lt;/option&gt;
  &lt;/select&gt;​
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
      margin-top:20px;
      margin-left:20px;
  }
  select {
      padding:3px;
      margin: 0;
      border-radius:4px;
      -webkit-box-shadow: 
          0 0px 0 #ccc,
          0 0px #fff inset;
      background: -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9));
      color:black;
      border:none;
      outline:none;
      display: inline-block;
      -webkit-appearance:none; 
      cursor:pointer;
      border: 1px solid #ccc;
  }
  </code></pre>