title: Style ng2-bootstrap's typeahead list-items
body: <p>Problem:</p>
  
  <p><a href="https://i.stack.imgur.com/YHSGc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YHSGc.png" alt="ng2-boostrap typeahead transparent background"></a></p>
  
  <p>I want the results to be below each other (full width) and not to have a transparent background. I right clicked one of the items and clicked 'inspect' so I figured out what to use as a selector.</p>
  
  <p><strong>What I have tried:</strong></p>
  
  <pre><code>ul.dropdown-menu li {
  background-color: black !important;
  opacity: 1 !important;
  color: yellow !important;
  </code></pre>
  
  <p>}</p>
  
  <p>Didn't change a thing, so either I'm not selecting it right or I don't know. I have a custom template: </p>
  
  <pre><code>&lt;template #customItemTemplate let-model="item" let-index="index"&gt;
      &lt;h5 style="width: 100%"&gt;{{model.title || model.name}}&lt;/h5&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>but even in-line style didn't change a thing.</p>
  
  <p><strong>Question:</strong></p>
  
  <p>How can I style the results?</p>
  
  <p><strong>PS:</strong>
  I figured it might be useful to mention that I'm using MaterializeCSS.</p>