How to apply custom CSS to Angular Material md-contact-chips


Tags: css,angularjs,angular-material

Problem :

I'm trying to apply a specific CCS to just one of my md-contact-chips from Angular Material. This is the piece of HTML:

<div class="col-xs-10 col-xs-offset-1" style="height:20%;background:rgb(255, 255, 255);border-radius: 20px;border: 3px solid #A3AB45;margin-bottom:20px">
            <md-contact-chips id="transform-tags"
                              ng-model="contacts"
                              md-contacts="querySearch($query)"
                              md-contact-name="name"
                              md-contact-image="image"
                              md-contact-email="email"
                              md-require-match="true"
                              md-highlight-flags="i"
                              filter-selected="filterSelected"
                              placeholder="Categories">
            </md-contact-chips>
        </div>

And this is the CCS code:

.md-chips.md-focused {
    box-shadow: none !important;
}

.md-chips {
    box-shadow: none !important;
}

This works as intended but it's being applied to all md-contact-chips, I only want to apply it only to the one with id transform-tags, so I modify the CCS in this way:

#transform-tags.md-chips.md-focused {
    box-shadow: none !important;
}

#transform-tags.md-chips {
    box-shadow: none !important;
}

But when I do this, the CCS is not being applied anymore! Is there some trick I need to do to apply CCS to Angular Material elements?



Solution :

Try this:

#transform-tags md-chips .md-chips
{
    box-shadow: none;
}

Hope this help.


    CSS Howto..

    HTML/CSS How to format Text and have an Image floating next to it

    How to add CSS class to body tag in Wordpress using body_class

    How can I rotate(or change) background image using CSS and Javascript

    How to output element.style.marginTop using digits only?

    how to use
    for navigation purpose

    How to write multiple css selectors in one line?

    How to replace with a
    filled with CSS?

    How to fix this CSS 3 code to make it working properly on the server?

    HTML CSS Form - How to center the form on the page?

    How to split page into 4 equal parts?

    MVC How make a logout button

    How to Control Width of Title (H2) with CSS?

    How to place two divs next to each other?

    How to prevent document scrolling but allow scrolling inside div elements on websites for iOS and Android?

    How to make these jquery pop ups fall back to css when javascript disabled

    How to make a key shape using css?

    Anyone know how Atlassian sizes the height of the splitter div in Confluence?

    How to make div scroll down with a page once it reaches top of page?

    how to redirect page

    CSS: How to set minimum and maximum height according to inside?

    How to separate CSS positioning from CSS styling?

    How to control the speed of a SVG line animation with CSS

    How can I change Github markdown background?

    How do I center content and extend the background color to 100% of the page?

    How to change order of elements inside tables?

    How to Assemble HTML,CSS and JS with EachOther

    How to manage assets for modern/ancient browsers

    How to enlarge HTML text while keeping its center anchored at a point?

    How to assign speed parameter to callback functions

    How do i position a div relative to the window page (responsive css)