title: How to css style angular2's Ng2-completer plugin input box and dropdown color?
body: <p>I am using angular2/4's Ng2-Completer plugin and am having trouble with styling of the component. I want to change the background dropdown to "red" and the input box to be blue.</p>
  
  <p>The following is my plunkr:
  <a href="https://plnkr.co/edit/sVnfpBiEb5jBdtul4ls9?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/sVnfpBiEb5jBdtul4ls9?p=preview</a></p>
  
  <p>I tried to include the following CSS, but it does not appear to impact anything:</p>
  
  <pre><code>    .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;
      }
  </code></pre>
  
  <p>My component:</p>
  
  <pre><code>    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: `&lt;h1&gt;Search color&lt;/h1&gt;
                  &lt;ng2-completer id="customid" [(ngModel)]="searchStr" [datasource]="searchData" [minSearchLength]="0" [clearSelected]="true" (selected)="onSelected($event)"&gt;&lt;/ng2-completer&gt;
                  &lt;p&gt;Selected: {{selectedColor}}&lt;/p&gt;
                  `
      })
      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: "";
        }
      }
  </code></pre>