title: Custom select in IE
body: <p>I have a problem with custom select in Internet Explorer. When I click to select, then the option area appearance is very bad. In chrome or firefox it works well.</p>
  <p>Here is my example <a href="https://jsfiddle.net/kxytwo0e/1/" rel="nofollow noreferrer">https://jsfiddle.net/kxytwo0e/1/</a>. If you open it with IE and you select the last option, then you click again to the select then you will see the problem.</p>
  <p>Here is my html code:</p>
  <pre><code>&lt;div class=&quot;custom-select&quot;&gt;
      &lt;select&gt;
          &lt;option&gt;Here is the first option&lt;/option&gt;
          &lt;option&gt;The second option&lt;/option&gt;
          &lt;option&gt;The 3 option&lt;/option&gt;
          &lt;option&gt;The 4 option&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And here is my css code:</p>
  <pre><code>    /*custom-select start*/
  
  .custom-select {             
      padding: 0;
      position: relative; 
      height: 36px; 
      width: 100%; 
      z-index: 1;
      /*margin-left: 2px;*/         
  }
      
  .custom-select:hover { border-color: #999; }
  .custom-select:before {
      background: url(&quot;../img/arrow-down.jpg&quot;) no-repeat right center;
      // color: #333;
      content: &quot;&quot;; 
      height: 100%; 
      padding:  0 0  0 20px;
      position: absolute;
      top: 0; 
      right: 20px; 
      z-index: -1;
  }
      
  @-moz-document url-prefix() {
      .custom-select:before {
          height: 34px;
          right: 0px;
      }
  } 
      
  .custom-select select {
      background-color: transparent;
      border: 1px solid #b9b9b9;
      /*color: #555;*/
      height: 100%;
      width: 100%; 
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
  } 
      
  .custom-select select::-ms-expand { display: none;}
  .custom-select select:focus { outline: none; }
  .custom-select select option{
      padding: 2px;
  }
      
  :-moz-any(.custom-select):before {
      background-color: #fff;
      pointer-events: none;
      z-index: 1; 
      margin-top: 1px;
      margin-right: 1px;
      border-radius: 3px;
   }
  /*custom-select end*/
  </code></pre>
  <p>Thank you.</p>
  <p>Edit: I realized the downvote was valid, because I did not specify what I expect and what I get instead. In Chrome and FireFox, the option area is shown just below the select, but in IE the option area is shown over the select. I would like to show the option are just below the select. Is this possible to achieve?</p>