スタイリングMD-オートコンプリート

Question

Iは、角4で動作し、私は私のMD-オートコンプリートで国境半径を追加したいと思いますが、それは動作しませんアンギュラ材料 https://material.angular.io/components/autocomplete/api を使用

...

<md-autocomplete class="myclass"> 

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

は、あなたが持っていますか説明？ 可能ですか？

どうもありがとう

Answer 1

.mat-autocomplete-panelクラス名を使用、drowpdownリストスタイルを変更するには：

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

これは、すべてのオートコンプリートに影響しますが。複数の変数を持っていて、異なるスタイルにしたい場合は、それに応じて異なる変数名とスタイルを設定できます。二つ目については、例えば：

HTML

あなたはどのファイルで、スタイリングを置けばいいの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-オートコンプリートの周囲に境界線を配置するか、境界線がMD-フォームフィールドの周りになりたいんですか？

私はあなたがフォームフィールドの周りにそれをしたいと思う。 HTMLの例については、https://material.angular.io/components/autocomplete/examplesを参照してください。

次plunkrを開くと、それはMD-フォームフィールドのスタイルをあなたのCSSを使用しています。

.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％の灰色の赤を使用。