How to style select list Angular?

Question

How to style Select List from Angular Material:

 <md-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
    <md-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </md-option>
  </md-select>

For example, I need to make border and add arrow on the right corner.

How to do this in Material, just to modify CSS file or does exist special approach?

You need to put border around each option or the select panel? Does the arrow in the right corner do anything, or just an icon? — Nehal
– Nehal, Commented Jul 31, 2017 at 23:37
I tried to set CSS for mat-select-placeholder as` {display: none !important;}` It does not work — Daniel
– Daniel, Commented Aug 1, 2017 at 13:16

Milk · Accepted Answer · 2017-08-01 02:25:15Z

1

You can modify (or include your own new) CSS file that has the required design changes.

select boxes can be tricky to stylize and an md-menu offers more flexibility if you require it.

answered Aug 1, 2017 at 2:25

Milk

2,6676 gold badges38 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daniel Over a year ago

I try to changes CSS styles in style.css of components file like this: .mat-tab-label { border-radius: 3px; background-color: #eeeeee; }. But it does not repalce Angular Material styles.

Milk Over a year ago

You can use background-color: #eeeeee !important; to force the override. I can't be sure your class naming is correct from the information in the question though.

Collectives™ on Stack Overflow

How to style select list Angular?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related