title: Material Design Components select menu not rendering correctly for web
body: <p>I'm trying to add a basic MDC select menu to my website. But it's not quite right—the right of the box shows the MDC arrow along with the normal HTML one, and the words are placed too close to the menu label (<a href="https://i.stack.imgur.com/CFQEJ.png" rel="nofollow noreferrer">seen here</a>).</p>
  
  <p>HTML part—</p>
  
  <pre><code>&lt;div class="mdc-select mdc-select--box day-select"&gt;
    &lt;select class="mdc-select__native-control" required&gt;
      &lt;option value="" disabled selected&gt;&lt;/option&gt;
      &lt;option value="grains"&gt;
        Bread, Cereal, Rice, and Pasta
      &lt;/option&gt;
      &lt;option value="vegetables"&gt;
        Vegetables
      &lt;/option&gt;
      &lt;option value="fruit"&gt;
        Fruit
      &lt;/option&gt;
    &lt;/select&gt;
    &lt;label class="mdc-floating-label"&gt;Pick a Food Group&lt;/label&gt;
    &lt;div class="mdc-line-ripple"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>app.scss part</p>
  
  <pre><code>@import "@material/select/mdc-select";
  </code></pre>
  
  <p>and the final app.js part</p>
  
  <pre><code>import {MDCSelect} from '@material/select';
  new MDCSelect(document.querySelector('.day-select'));
  </code></pre>
  
  <p>Seems like I have everything I need, but I'm obviously missing something dumb. Any advice is appreciated—thanks!</p>