How to change angularJS's default css styles? Search box etc

Question

Is there a way to change the default styles of AngularJs search box?

 <div ng-controller="PersonListCtrl">
            <div class="bar">Search:
                <input ng-model="query">
            </div>
            <ul class="" ng-show="query">
                <li ng-repeat="person in persons | filter:query">{{person.name}}</li>
            </ul>
        </div>
    </div>

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.

I've tried

#bar {

 background-color: #d7d7d7;
color:#000000;
}

and

.bar{

 background-color: #d7d7d7;
color:#000000;
}

Answer 1

AngularJS does not introduces any styles as far as I know. You need to assign the id or the class to the HTML element:

<input ng-model="query" id="bar">

or

<input ng-model="query" class="bar">

Answer 2

You're currently targeting the wrapper of the input, you could just use

.bar input {

instead