angularjs - Overriding component's auto generated childrens css; Angular -

in angular, there ui-select component generating spans it's visual:

as can see span has auto-assigned css class of ".btn" coloring component color - color of sort of buttons through application.

what need override through drop down not button , need not one.

in order override this, have assigned "search_drop" class parent div !important attribute, can see.

css definition "search_drop" is:

.search_drop {     font-family: hpsimplified, arial !important;     color: black;     background: none !important; } 

result same.

can you, please, advice how override span's style? .btn css class needs stay unchanged.

thanks!

try

.search_drop .ui-select-match .btn {     font-family: hpsimplified, arial !important;     color: black;     background: none !important; } 

to right level of specificity.

this affect .btn classes within ui-select components