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


Tags: css,angularjs

Problem :

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;
}


Solution :

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">

    CSS Howto..

    How do I scrape the table from a website (link provided) using CSS? [closed]

    How to use CSS sprites within a responsive design

    How to put borders to
  • onclick in css Tabs
  • HTML+CSS: How to add arrow to horizontal menu items?

    How do I add a horizontal scrollbar to a table in a div?

    How do I allow CSS files to be referenced from other domains?

    How to compress CSS

    Beginner's stuff: How to stop CSS' Divs from overlapping?

    How Can I Override Style Info from a CSS Class in the Body of a Page?

    With HTML and CSS, how to have an image that is vertically aligned with a horizontal line?

    How do I change the function of a button when the window size changes?

    How to exclude the container from this javascript code?

    How do I make a div scrollable, without showing a nasty scrollbar?

    How can I centralize a list with css?

    How do I enlarge images on a web page

    How to click on a link from the header and then go back with HTML, Javascript and CSS? [closed]

    WordPress admin stylesheet not showing images

    How to make this menu occupy all the remaining space's width?

    How to styles labels only within fieldsets using CSS?

    How to align multiple images horizontally (in a row)?

    How does one implement dark/transparent text-boxes?

    I need to edit the css properties of a link when it's active (a:active) with jquery after they have been set by normal html css. How do I do that?

    how to create a half bordered circle(only css, not js or even svg)?

    How can I set my unordered list to be in the middle not in-line (see image)?

    How do I get
    margin working?

    Does anyone know how to store a css change made by javascript function locally?

    How to change the CSS of page dynamically based on value?

    How to make a button CSS change only IF form fields are valid

    How to keep the Parent menu hovered while the mouse in child menu in a Dropdown Menu

    I have 3 divs in one row, how do I get the middle div to stay an exact width while the left and right div shrink in as the screen resizes smaller?