title: How to change angularJS's default css styles? Search box etc
body: <p>Is there a way to change the default styles of AngularJs search box?  </p>
  
  <pre><code> &lt;div ng-controller="PersonListCtrl"&gt;
              &lt;div class="bar"&gt;Search:
                  &lt;input ng-model="query"&gt;
              &lt;/div&gt;
              &lt;ul class="" ng-show="query"&gt;
                  &lt;li ng-repeat="person in persons | filter:query"&gt;{{person.name}}&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I would like to change the colour and size of the search box and perhaps change the text colour.  I've messed around in the CSS but it doesn't seem to be effecting anything.</p>
  
  <p>I've tried </p>
  
  <pre><code>#bar {
  
   background-color: #d7d7d7;
  color:#000000;
  }
  </code></pre>
  
  <p>and </p>
  
  <pre><code>.bar{
  
   background-color: #d7d7d7;
  color:#000000;
  }
  </code></pre>