How to overwrite angular 2 material styles? : <p>I have this select in angular material:</p>

<p><a href="https://i.stack.imgur.com/cAOsA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/cAOsA.png" alt="enter image description here"></a></p>

<p>Its code :</p>

<pre><code>&lt;md-select placeholder="Descuentos y convenios" [(ngModel)]="passenger.discount"&gt;
        &lt;md-option [value]="null" [disabled]="true"&gt;
            Descuentos
        &lt;/md-option&gt;
        &lt;md-option *ngFor="let option of discounts" [value]="option"&gt;
            {{ option }}
        &lt;/md-option&gt;
        &lt;md-option [value]="null" [disabled]="true"&gt;
            Convenios
        &lt;/md-option&gt;
        &lt;md-option *ngFor="let option of agreements" [value]="option"&gt;
            {{ option }}
        &lt;/md-option&gt;
&lt;/md-select&gt;
</code></pre>

<p>And I would like to have this styles in it:</p>

<p><a href="https://i.stack.imgur.com/gwoDh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/gwoDh.png" alt="enter image description here"></a></p>

<p>I tried to put some classes over md-select and md-option, but not worked.
I would like to have maybe just an example of how to put the background color or the border and that would give me an idea.</p>

<p>Thank you in advance </p>
