Customizing mat-select to Remove all Underlines and the Superscript Label (Angular/Material)

mat-select-styling-01.txt

 /* 
    The mat-select options are slightly left to the start of the 
    ::-webkit-progress-inner-element. That causes some display 
    problems in some instances.
    
    This gist also maintains the width of the select options 
    (drop-down) so that it will allow to display the text of the 
    largest option (within reason) instead of displaying at 100%.
    
    If you can get away without !important directives in your 
    (S)CSS, go for it.
    
    This information has been culled together from various sources 
    on the web. I just find it very useful and am storing it here 
    in the hope that it will save someone else the hour I spent 
    figuring all of this out.
    
    NOTE: 
    ::ng-deep is not really deprecated and probably won't get deprecated. 
    (I have not come across any mainstream web browsers that do not support 
    ::ng-deep anymore. Do your own research to verify that this will work 
    for you and your development & production environment.
    Tuesday, October 15, 2019 | 8:30:58 AM
*/
 ::ng-deep .mat-select-panel {
     min-width: auto !important;
     max-width: auto !important;
     transform: translate(15px, 44px) !important;
     -webkit-transform: translate(15px, 44px) !important;
     -moz-transform: translate(15px, 44px) !important;
     -ms-transform: translate(15px, 44px) !important;
     -o-transform: translate(15px, 44px) !important;
 }
 /* 
    This will hide the element while it's being animated because
    the animation happens for the original position 
*/
  ::ng-deep .mat-select-panel.ng-animating {
     display: none !important;
 }