title: Remove dropdown arrow in select
body: <p>Hi I am doing my navigation menu as a select drop down menu. This was my css</p>
  
  <pre><code>#navigation {
      position: relative;
      margin-left:0;
      display: block;
      width:95%;
      height:30px;
      margin-top:10px;
      margin-bottom:15px;
      /*background:url(../Shared/arrow.jpg) no-repeat right #ececec;*/   
      background-color:#ececec;
      border-radius:3px;
  }
  
  nav select { 
      display: inline-block; 
      width:90%;
      margin-left:2%;
      border:0 !important;
      position:relative; 
      margin-top:6px; 
      background:url(../Shared/arrow.png) no-repeat right #ececec;
      -webkit-appearance: none;          
      -moz-appearance: none;
      /*background: transparent;*/
  }
  
  select::-ms-expand {
      display: none;
  }
  </code></pre>
  
  <p>My problem is that i am trying to show my own  arrow button , but it always placed under the original arrow button of select box. How can i change this</p>
  
  <p><img src="https://i.stack.imgur.com/CIATf.png" alt="enter image description here"></p>
  
  <p>when change the width of the select as </p>
  
  <pre><code>  width:110%;
  </code></pre>
  
  <p>then output will be</p>
  
  <p><img src="https://i.stack.imgur.com/rI5cb.png" alt="enter image description here"></p>