How to style Angular Material autocomplete?

user_6839335 0
Viewed 11306

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?

angular-material2 angular css
2 Answers

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

user_54684630

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.

user_17411710
Related