如何CSS样式angular2的Ng2-completer插件输入框和下拉颜色？

我正在使用angular2/4的Ng2-Completer插件，并且遇到组件样式问题。我想将背景下拉菜单更改为“红色”，并将输入框更改为蓝色。如何CSS样式angular2的Ng2-completer插件输入框和下拉颜色？

以下是我的plunkr： https://plnkr.co/edit/sVnfpBiEb5jBdtul4ls9?p=preview

我试着包括以下CSS，但似乎并没有影响到任何东西：

.completer-row { 
     display: inherit; 
     background:blue; 
    } 

    .completer-selected-row { 
     background-color: lightblue; 
     color: yellow; 
    } 

    .completer-row p { 
     position: relative; 
     top: 50%; 
     transform: translateY(50%); 
    } 

    .completer-dropdown-holder { 
     position: absolute; 
     background: red; 
    } 

    .customid { 
    background:blue; 
    }

我的组件：

import { Component } from '@angular/core'; 
    import { CompleterService, CompleterData } from 'ng2-completer'; 
    import {Observable} from 'rxjs/Observable'; 
    import 'rxjs/Rx'; 

    @Component({ 
     selector: 'my-app', 
    styleUrls: [ 
    './app.component.css' 
    ], 
     template: `<h1>Search color</h1> 
       <ng2-completer id="customid" [(ngModel)]="searchStr" [datasource]="searchData" [minSearchLength]="0" [clearSelected]="true" (selected)="onSelected($event)"></ng2-completer> 
       <p>Selected: {{selectedColor}}</p> 
       ` 
    }) 
    export class AppComponent { 
     protected searchStr: string; 
     protected dataService: CompleterData; 
     protected selectedColor: string; 
     protected searchData = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black']; 

     protected onSelected(item: CompleterItem) { 
     this.selectedColor = item? item.title: ""; 
     } 
    }

来源

2017-06-13 Rolando

输入[类型= “搜索”] {背景：蓝色}对我的作品; –

Angular 2具有安全功能，其中CSS仅在其受尊重的组件的HTML文件上工作。或者css必须进入全球使用的styles.css文件。但是，您可以通过添加hots: >>> .class-name强制CSS应用此方法将强制CSS应用于子组件。在此线程Angular 2: How to style host element of the component? https://alligator.io/angular/styles-between-components-angular/

来源

2017-06-13 19:15:52

你能告诉我一个使用ng2-completer的例子吗？我试图用你用包装类中的东西来描述：hosts（.classname）和/ deep/.classname，但这里显示的是没有效果。 – Rolando

尝试'host：>>> .completer-row {display：inherit; 背景：蓝色;当我做了类似的事情时，这看起来很有用。确保尖括号之间没有空格。如果你正在使用像intelliJ这样的IDE，它往往会将它们放在格式化上。 –

你可以在'ng2-completer' [demo]中看到一个例子（https://github.com/oferh/ng2-completer/blob/master/demo/native-cmp.css#L28） –

更多信息您可以使用inputClass属性格式的ng2-completer。例如与自举：

<ng2-completer [inputClass]="'form-control form-control-inline'" ...></ng2-completer>

来源

2017-07-29 07:10:19

伟大而明确的答案，但为什么单引号内双引号？我可以在哪里找到ng2-completer的文档？ – Nofel

@Nofel括号期望一个表达式，所以在这种情况下，我们需要一个字符串，这就是为什么我们在双引号内使用单引号。请参阅[Angular2文档]（https://angular.io/guide/template-syntax#binding-syntax-an-overview）。可以在这里找到ng2-completer文档（https://github.com/oferh/ng2-completer）。 –

可以样式角NG2完成者是这样的：

::ng-deep .completer-row{ 

     }

来源

2017-11-14 12:10:31 ferralucho

如何CSS样式angular2的Ng2-completer插件输入框和下拉颜色？

回答

相关问题