title: html remove the default select option arrow with extra space from options
body: <p>I have a select option markup like this</p>
  
  <pre><code>&lt;div class="styleselect"&gt;
    &lt;select onchange="setLocation(this.value)" class="selections"&gt;
      &lt;option selected="selected" value="position"&gt;Position&lt;/option&gt;
      &lt;option value="name"&gt;Name&lt;/option&gt;
      &lt;option value="price"&gt;Price&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here I want to style the default arrow of select option and I changed my css like this</p>
  
  <pre><code>.styleselect {
      background-color: #DFD3C3;
      background-image: url("http://s21.postimg.org/nx05vn15f/dropdown_style.png");
      background-position: 117px center;
      background-repeat: no-repeat;
      border: 1px solid #C5AF8A;
      overflow: hidden;
      vertical-align: middle;
      width: 140px;
      padding: 0;
      margin: 0;
      display: inline-block;
  }
  .styleselect select {
      background-color: transparent;
      margin: 0 0 1px;
      padding: 4px;
      vertical-align: middle;
      width: 190px;
  }
  </code></pre>
  
  <p>It worked fine. But again I got one problem that when I made click on the options the options came with the extra width from the actual width where it is looking really odd. I know that the extra width is coming from the width <code>.styleselect select</code> where I have put <code>extra width</code>. But that has been donefor the styling the arrow. Can someone kindly tell me how to fix the extrawidth so that the my custom arrow should come in place for default arrow in the select options and the extra width for the options will be also hide. The link for fiddle is <a href="http://jsfiddle.net/fiddleuser1234/6TVTL/" rel="nofollow">here</a></p>
  
  <p>Any help and suggestions will be really appreciable. Thanks</p>