CODEWITHSUNDEEP
angular
Joseph Chikeme
Joseph Chikeme

Reputation: 512

How to add border radius to Angular material select field

I tried editing the select field but the border radius doesn't work. I've tried editing it from the general style.css but it isn't working yet.

Upvotes: 0

Views: 602

Answers (2)

Mustafa Omran
Mustafa Omran

Reputation: 344

Angular Material Docs supports some specific options for customizing components Follow Angular Docs

Upvotes: 0

Francisco Santorelli
Francisco Santorelli

Reputation: 1338

It has to do with Encapsulation on Angular. To change it you need two things:

  • CSS: you have to target your style with more selectors than the original target. You can check with the inspector what concatenation of selectors are setting the syle. Example of the selectors that add border-color in stackoverflow to the yellow card to the right ->

css selectors

As you can see, there are several classes that have this border-color, but in this particular one it's .s-slidebarwidget__yellow .s-sidebarwidget--header, so if you target s.-sidebarwidget--header (only the target element, ignoring the parent's class) you won't be able to change anything, as there is another selector with higher priority (parent-class child-class) than your only-child-class targeted selector, and you would need to add a higher priority selector. For instance, 2 classes on child and target .parent .child.myclass, would have higher priority. Please read this for a little insight on selectors. Also note that using anything other than 'classes' to target elements is anti-pattern, as it creates bugs down the road.

  • Angular encapsulation: You have to be aware that angular uses encapsulation which in turn makes it that your classes don't actually reach the desired element (because it is encapsulated). For example, an encapsulated element might be on source code .my-class, but Angular creates .my-class[ng-component-01zh]. They are not the same. There's a workaround: You can appendd ::ng-deep behind your class to penetrate this encapsulation.

So in short, 1) find the class you want to modify, 2) check the selectors that add the current stlye, 3) create a selector that is a little bit more prioritized, 4) add ::ng-deep behind that selector if needed, to penetrate Angular's encapsulation.

Let me know any questions

Upvotes: 1

Related Questions