title: HTML Select Menu issue in IE11
body: <p>I have this html for an select control</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select class="form-control"&gt;
      &lt;option value="0"&gt;&lt;/option&gt;
      &lt;option value="1: 1" &gt;Jr.&lt;/option&gt;
      &lt;option value="2: 2"&gt;Sr.&lt;/option&gt;
      &lt;option value="3: 3"&gt;I&lt;/option&gt;
      &lt;option value="4: 4"&gt;II&lt;/option&gt;
      &lt;option value="5: 5"&gt;III&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It is getting rendered as expected in chrome</p>
  
  <p><strong>chrome image 1</strong>
  <a href="https://i.stack.imgur.com/UIJ5U.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UIJ5U.png" alt="enter image description here"></a></p>
  
  <p><strong>chrome image 2</strong></p>
  
  <p><a href="https://i.stack.imgur.com/rCarf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rCarf.png" alt="enter image description here"></a></p>
  
  <p>but in IE, the select option is hiding the control when it is clicked or in other words the the select option is not getting opened from the bottom of the select control as seen in this following screen shot</p>
  
  <p><strong>IE image 1</strong>
  <a href="https://i.stack.imgur.com/OjgIK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OjgIK.png" alt="enter image description here"></a></p>
  
  <p><strong>IE image 2</strong></p>
  
  <p><a href="https://i.stack.imgur.com/8UAUz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8UAUz.png" alt="enter image description here"></a></p>
  
  <p>is this a default behaviour or can I change it? I tried giving using this css but did not work </p>
  
  <pre><code>   select.form-control {
      width: 100%;
      max-width: 325px;
      border-width: 0 0 1px 0;
      box-shadow: none;
      border-radius: 0;
      -moz-appearance: none;
      text-indent: .01px;
      text-overflow: '';
      position: relative;
  }
     option, select.form-control option {
      color: blue !important;
      top: 0px !important;
      position: absolute !important;
  }
  </code></pre>
  
  <p>any suggestion?</p>