title: How do I change the select box arrow
body: <p>I need your help.</p>
  
  <p>I can't seem to wrap my head around this one and figure it out. How do I change the default Windows 7, IE 10 default arrow in the select box:<img src="https://i.stack.imgur.com/RMFqu.png" alt="enter image description here"> to make it look like this, using the custom arrow below:<img src="https://i.stack.imgur.com/VVd9e.png" alt="enter image description here">.</p>
  
  <p>Here is the arrow that I desire to use:<img src="https://i.stack.imgur.com/N04pF.png" alt="enter image description here"></p>
  
  <p>Here is my HTML markup:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
     &lt;style type="text/css"&gt;
     select { font: normal 13px Arial; color: #000;}
     .container {
           border: 1px solid red;
           position: relative; width: 124px; height: 18px; overflow: hidden;
      }
     .inpSelect {
          color: black; background: #ffa;
          position: absolute; width: 128px; top: -2px; left: -2px;
      }
     &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="container"&gt;
      &lt;select class="inpSelect" name="xxx"&gt;
          &lt;option value="0" selected="selected"&gt;actual browser&lt;/option&gt;
          &lt;option value="1"&gt;IE&lt;/option&gt;
          &lt;option value="2"&gt;Firefox&lt;/option&gt;
          &lt;option value="3"&gt;Opera&lt;/option&gt;
          &lt;option value="4"&gt;Safari&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>