diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
index 2b0d6796b98e..e43903de213c 100644
--- a/src/lib/select/select.spec.ts
+++ b/src/lib/select/select.spec.ts
@@ -260,6 +260,16 @@ describe('MdSelect', () => {
expect(event.defaultPrevented).toBe(true);
});
+ 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', () => {
@@ -2142,7 +2152,8 @@ describe('MdSelect', () => {
template: `
+ [tabIndex]="tabIndexOverride" [aria-label]="ariaLabel" [aria-labelledby]="ariaLabelledby"
+ [panelClass]="panelClass">
{{ food.viewValue }}
@@ -2168,6 +2179,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 107dd980331a..1bc3b01a5102 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; }