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

Posted 2023-03-06

【中文标题】如何css样式angular2的Ng2-completer插件输入框和下拉颜色？

【英文标题】：How to css style angular2's Ng2-completer plugin input box and dropdown color?

【发布时间】：2017-11-15 17:06:22

【问题描述】：

我正在使用 angular2/4 的 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: "";
      
    

【问题讨论】：

input[type="search"] background : blue 适合我；

【参考方案1】：

您可以使用ng2-completer 的inputClass 属性。 例如使用引导程序：

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

【讨论】：

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

@Nofel 括号需要一个表达式，所以在这种情况下我们需要一个字符串，这就是为什么我们在双引号内有单引号。见Angular2 documentation。 ng2-completer 文档可以在here找到。

【参考方案2】：

您可以像这样设置 Angular ng2 完成器的样式：

::ng-deep .completer-row

         

【参考方案3】：

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/

【讨论】：

您能否向我展示一个使用 ng2-completer 的示例，我正在尝试使用您所描述的组合将类包装在 :hosts(.classname) 和 /deep/ 中。类名，但这里似乎没有效果。

尝试host: >>> .completer-row display: inherit; background:blue; ，当我做类似的事情时，这看起来有效。确保尖括号之间没有空格。如果您使用的是 intelliJ 之类的 IDE，它往往会在格式化时将它们隔开。

你可以看看ng2-completerdemo中的一个例子