diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
index 43a4af6673cf..f46c8456728a 100644
--- a/src/lib/select/select.spec.ts
+++ b/src/lib/select/select.spec.ts
@@ -232,6 +232,16 @@ describe('MdSelect', () => {
});
}));
+ it('should be able to set extra classes on the panel', () => {
+ trigger.click();
+ fixture.detectChanges();
+
+ const panel = overlayContainerElement.querySelector('.mat-select-panel') as HTMLElement;
+
+ expect(panel.classList).toContain('custom-one');
+ expect(panel.classList).toContain('custom-two');
+ });
+
});
describe('selection logic', () => {
@@ -2003,7 +2013,8 @@ describe('MdSelect', () => {
template: `
+ [tabIndex]="tabIndexOverride" [aria-label]="ariaLabel" [aria-labelledby]="ariaLabelledby"
+ [panelClass]="panelClass">
{{ food.viewValue }}
@@ -2029,6 +2040,7 @@ class BasicSelect {
tabIndexOverride: number;
ariaLabel: string;
ariaLabelledby: string;
+ panelClass = ['custom-one', 'custom-two'];
@ViewChild(MdSelect) select: MdSelect;
@ViewChildren(MdOption) options: QueryList;
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index 5099709a42f6..afd634339426 100644
--- a/src/lib/select/select.ts
+++ b/src/lib/select/select.ts
@@ -229,6 +229,9 @@ export class MdSelect implements AfterContentInit, OnDestroy, OnInit, ControlVal
/** All of the defined select options. */
@ContentChildren(MdOption) options: QueryList;
+ /** Classes to be passed to the select panel. Supports the same syntax as `ngClass`. */
+ @Input() panelClass: string|string[]|Set|{[key: string]: any};
+
/** Placeholder to be shown if no value has been selected. */
@Input()
get placeholder() { return this._placeholder; }