CODEWITHSUNDEEP
cssangularjsangular-material
Andres
Andres

Reputation: 6200

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

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?

Upvotes: 0

Views: 880

Answers (1)

DieuNQ
DieuNQ

Reputation: 985

Try this:

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

Hope this help.

Upvotes: 1

Related Questions