Styling mat-select in Angular Material
For Angular9+, according to this, you can use:
.mat-select-panel {
background: red;
....
}
Demo
Angular Material uses
mat-select-content
as class name for the select list content. For its styling I would suggest four options.1. Use ::ng-deep:
Use the /deep/ shadow-piercing descendant combinator to force a style
down through the child component tree into all the child component
views. The /deep/ combinator works to any depth of nested components,
and it applies to both the view children and content children of the
component.
Use /deep/, >>> and ::ng-deep only with emulated view encapsulation.
Emulated is the default and most commonly used view encapsulation. For
more information, see the Controlling view encapsulation section. The
shadow-piercing descendant combinator is deprecated and support is
being removed from major browsers and tools. As such we plan to drop
support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until
then ::ng-deep should be preferred for a broader compatibility with
the tools.
CSS:
::ng-deep .mat-select-content{
width:2000px;
background-color: red;
font-size: 10px;
}
DEMO
2. Use ViewEncapsulation
... component CSS styles are encapsulated into the component's view and
don't affect the rest of the application.
To control how this encapsulation happens on a per component basis,
you can set the view encapsulation mode in the component metadata.
Choose from the following modes:
....
None means that Angular does no view encapsulation. Angular adds the
CSS to the global styles. The scoping rules, isolations, and
protections discussed earlier don't apply. This is essentially the
same as pasting the component's styles into the HTML.
None value is what you will need to break the encapsulation and set material style from your component.
So can set on the component's selector:
Typscript:
import {ViewEncapsulation } from '@angular/core';
....
@Component({
....
encapsulation: ViewEncapsulation.None
})
CSS
.mat-select-content{
width:2000px;
background-color: red;
font-size: 10px;
}
DEMO
3. Set class style in style.css
This time you have to 'force' styles with !important
too.
style.css
.mat-select-content{
width:2000px !important;
background-color: red !important;
font-size: 10px !important;
}
DEMO
4. Use inline style
<mat-option style="width:2000px; background-color: red; font-size: 10px;" ...>
DEMO
Styling mat-option with Active and Hover - Angular Materials
mat-list-option has mat-option.mat-active
class when it's active and mat-option.mat-selected
when selected.
Please add the following CSS to your stylesheet:
.mat-option.mat-active {
background: red !important;
}
The following could be used to style hovering:
.mat-option:hover:not(.mat-option-disabled)
Styling mat-select when on hover - Angular Material
All CSS changes either you need to make them in the "root" css or use ng-deep like
::ng-deep{
.mat-option-text:hover:not(.mat-option-disabled) {
background: #3071a9 !important;
color: white;
}
.mat-option:hover {
background: red !important;
color: green !important;
}
}
Since here you are changing a standard control my recommendation is make this change in your styles.css or based css.
update
Please node you I think what you want to modify is the mat-option-text:hover
Online Demo
Related Topics
How to Apply a CSS Transition to the Overflow Property
How to Make This Header/Content/Footer Layout Using CSS
Css3 ::Selection Behaves Differently in Ff & Chrome
Background-Size in Shorthand Background Property (Css3)
Changing an Input's HTML5 Placeholder Color with CSS Does Not Work on Chrome
Webkit Support for Gradient Transitions
Multiple Descendant Children Selector with CSS
What Does @-Moz-Document Url-Prefix() Do
Media Query Not Working in IE9
Multiple Font-Weights, One @Font-Face Query
Changing Chunk Background Color in Rmarkdown
How to Make Firefox Print a Background-Color Style
Build List of Selectors with Less
Continuous CSS Rotation Animation on Hover, Animated Back to 0Deg on Hover Out