title: Can I apply a background colour on a dropdown in Microsoft Edge using only CSS?
body: <p>I have created <a href="https://formever.com/download" rel="nofollow noreferrer">this page with a download form</a>, and it includes a dropdown that is styled using CSS. This is what it looks like in Firefox and Chrome, where it is working as hoped:</p>
  
  <p><a href="https://i.stack.imgur.com/jNYAD.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jNYAD.jpg" alt="dropdown style working"></a></p>
  
  <p>In <strong>Microsoft Edge</strong>, the dropdown is essentially invisible, though, and I think it's because the background colour is not rendering. It looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/UmKIJ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UmKIJ.jpg" alt="dropdown style not visible in edge"></a></p>
  
  <p>If you click in the area where the dropdown is, it then becomes partially visible:</p>
  
  <p><a href="https://i.stack.imgur.com/knt4e.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/knt4e.jpg" alt="dropdown style when selected in edge"></a></p>
  
  <p>I have looked at <a href="https://stackoverflow.com/search?q=IE%20css%20dropdown">other answers on Stack Overflow about styling in CSS</a>, but it's not entirely clear to me why the background is not rendering. Some answers indicate I need to place styling directly on the <code>option</code> element, and other answers use Javascript with a <code>ul</code> element.</p>
  
  <p>If possible, I'd like to use a pure CSS solution. I don't need to support IE 8 or below, only IE 9 and above, including Edge.</p>
  
  <p>This is the CSS, in SASS format, that I am using:</p>
  
  <pre><code>.drop-down {
      display: block;
      -webkit-appearance: none;  /*REMOVES DEFAULT CHROME &amp; SAFARI STYLE*/
      -moz-appearance: none;  /*REMOVES DEFAULT FIREFOX STYLE*/
      border: 0 !important;  /*REMOVES BORDER*/
      margin-top: .5em;
      color: white;
      font-size:1em;
      padding: .4em 2em .4em .6em;
      cursor: pointer;
      background-size: 1em;
      background: $formever_blue url(dropdown_arrow.png) no-repeat;
      background-position-x: calc(100% - 0.5em);
      background-position-y: center;
  }
  .download-form .drop-down {
      font-size: 2em;
      width: 100%;
  }
  </code></pre>
  
  <p><strong>How can I make the dropdown style in Edge match how it appears in Firefox?</strong></p>