title: Angular Material (2) mdSelect: How to hide generated span.mat-select-underline tag
body: <p>My design calls for the select form control to be displayed with no underline, but I'm struggling to accomplish this.</p>
  
  <p><em>Wireframe design:</em></p>
  
  <p><a href="https://i.stack.imgur.com/pTgcr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pTgcr.png" alt="enter image description here"></a></p>
  
  <p><em>Actual look atm</em>:</p>
  
  <p><a href="https://i.stack.imgur.com/aDhOH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aDhOH.png" alt="enter image description here"></a></p>
  
  <p>The directive generates this HTML output:</p>
  
  <p><a href="https://i.stack.imgur.com/7X2IJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7X2IJ.png" alt="enter image description here"></a></p>
  
  <p>The SCSS I've written tries to target the <em>mat-select-underline</em> class, but it's not being applied once the directive generates the markup.</p>
  
  <pre><code>&amp; md-select {
        padding-top: 0;
  
        .mat-select-trigger &gt; .mat-select-underline {
          display: none;
        }
      }
  </code></pre>
  
  <p>I've also tried to use the directive's <em>panelClass</em> @Input property, but I'm not entirely sure where that's gets applied, since they're still working on supplementing their docs.</p>
  
  <p><a href="https://i.stack.imgur.com/hKgQd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hKgQd.png" alt="enter image description here"></a></p>
  
  <pre><code>.mat-no-underline {
        span.mat-select-underline {
          display: none;
        }
      }
  
  &lt;!-- HTML --&gt;
  &lt;md-select [(ngModel)]="commodityLine.classCode"
                             panelClass="mat-no-underline"
                             name="shipment_info_commodity_class_{{index}}"
                             placeholder="Class"
                             floatPlaceholder="never"
                             required="true"
                             aria-label="Commodity Class"&gt;
  
                    &lt;md-option *ngFor="let classItem of commodityClassOptions"
                               value="classItem"&gt;
                      {{classItem}}
                    &lt;/md-option&gt;
                  &lt;/md-select&gt;
  </code></pre>
  
  <p>mdSelect API docs: <a href="https://material.angular.io/components/select/api" rel="nofollow noreferrer">https://material.angular.io/components/select/api</a></p>