How to style Angular Material autocomplete?

Question

I work with Angular and use Angular Material [https://material.angular.io/components/autocomplete/api][1] [1]: https://material.angular.io/components/autocomplete/api
I would like add a border radius in my md-autocomplete but it doesn't work:

<md-autocomplete  class="myclass">

.myclass{
    background-color: rgb(250, 250, 250);
     border-bottom-left-radius: 50px;
     border-bottom-right-radius: 50px
}

Do you have an explanation?

Solution 1

To change the drowpdown list styling, use .mat-autocomplete-panel classname:

::ng-deep .mat-autocomplete-panel{
  border-radius: 10px;    
}

This will affect all the autocompletes. If you have more than one and wish to style them differently, you can set different variable name and style accordingly. For example for the second one:

HTML

<md-autocomplete #mauto="mdAutocomplete">

CSS

::ng-deep .mat-autocomplete-panel#md-autocomplete-0{  //for the first one

::ng-deep .mat-autocomplete-panel#md-autocomplete-1{ //for the second one

DEMO

Solution 2

Do you want to put a border around the md-autocomplete or do you want the border to be around the md-form-field?

I believe you want it around the form field. See https://material.angular.io/components/autocomplete/examples for an example of the HTML.

If you open the following plunkr, it uses your css to style the md-form-field:

.example-full-width {
     background-color: rgb(255, 0, 0);
     border-bottom-left-radius: 50px;
     border-bottom-right-radius: 50px
}

https://plnkr.co/edit/DWzjsRNGXZsPRfjWRrI6?p=preview

I used red instead of 15% gray so it was more obvious.

Comments

[lg0173]

No on my <md-autocomplete #auto="mdAutocomplete" class="example-full-width"> but it doesn't work thanks

[lg0173]

no, i want around the div which appear when I typed

[lg0173]

yes amazing you're a genious and if I have two autocomplete I add the id attribute ?

[Vega]

If you want to style differently, better to add inline style and put !important

[lg0173]

but if use inline style it doesn't work :( <md-autocomplete #mymdac="mdAutocomplete" style="border-radius: 10px !important; ">

[Vega]

Yes, it worked for the background color and set on the md-option. I made an update to the demo, please take a look