設置md-autocomplete樣式

Question

我使用angular 4並使用Angular材質https://material.angular.io/components/autocomplete/api我想在我的md-autocomplete中添加邊框半徑，但是它不起作用...

<md-autocomplete  class="myclass">

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

你有解釋嗎？ 可能嗎 ？

非常感謝

Answer 1

要更改drowpdown列表樣式，請使用.mat-autocomplete-panel類名：

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

這將影響所有自動完成功能。 如果您有多個並且希望使用不同的樣式，則可以相應地設置不同的變量名稱和樣式。 例如第二個：

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

Answer 2

您是要在md-autocomplete周圍放置邊框還是要在md-form-field周圍放置邊框？

我相信您希望在表單字段中使用它。 有關HTML的示例，請參見https://material.angular.io/components/autocomplete/examples 。

如果打開以下plunkr，它將使用CSS來設置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

我使用紅色而不是15％的灰色，所以它更加明顯。