I want the dropdown list to look something like this.
I am able to apply the hover effect but I cannot figure out how to move the dropdown list/container downwards and also how to make the edges of the container rounded and give specific border
I want a CSS only solution for this, is that even possible?
Since I was trying to apply CSS to <select> and <option> tag in an Angular project, I used the mat(Material) library to implement it.
I found out we can either use the ::ng-deep selector to overwrite the mat tags or we can write encapsulation: ViewEncapsulation.None in the .ts file of that respective component
For more detailed info on ::ng-deep see this post -> How and where to use ::ng-deep?
For more detailed info on encapsulation: ViewEncapsulation.None see this post -> When and why should we use View Encapsulation in angular