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 tell CSS to recalculate :first-of-type after DOM dynamically changes?

    How can I figure out how much a div shifts when a translate:scale is applied?

    How to appear two HTML input elements in single line (row)

    How to enable CSS editing in Intellij

    How to check css in unit test

    How Do I Add product descriptions (short) to hover box in woocommerce?

    html element h1 with links as background image show them in one line

    How to change the style/css of a tooltip?

    How to dynamically colour svg images in a webpage? [duplicate]

    How to adjust width of a child element without adjusting the width of the parent in CSS?

    How do I move a list's bullet point to the right side of the text?

    How to clip the top bar with screen

    How to pop a dialog box /iframe/Lightbox like one below above the webpage content [closed]

    How to Customize jCountdown timer which is using css sprite resources to become auto Responsive?

    How to place the text in the top right corner and not show buttons when printing

    How to add vertical scrolling to Windows 8 app in snapped view

    How to change CSS style without id or class

    How do I use this CSS animation in my HTML file?

    How to get a CSS selector in PHP?

    How to remove whitespace that appears after relative positioning an element with CSS

    How to align image and download button in css?

    How to make my first-child in css work properly?

    How to make table have same width as container?

    How to fix the height of this div

    How to vertically align text in my columns? [closed]

    How to filter HTML elements based on their css attribute values ? [closed]

    How to show the vertical image into horizontal manner using HTML and CSS?

    How to Fix text in Html with CSS

    How to get drop down menu sub lists to line up vertically

    How to let the users style a web component with their own CSS?