diff --git a/src/lib/select/_select-theme.scss b/src/lib/select/_select-theme.scss index 4033a4716b9..f886af4bb45 100644 --- a/src/lib/select/_select-theme.scss +++ b/src/lib/select/_select-theme.scss @@ -52,6 +52,10 @@ &.mat-accent { @include _mat-select-inner-content-theme($accent); } + + &.mat-select-required .mat-select-placeholder::after { + color: mat-color($warn); + } } .mat-select:focus:not(.mat-select-disabled).mat-warn, diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss index d7ca055905d..5fd2e0b8d9b 100644 --- a/src/lib/select/select.scss +++ b/src/lib/select/select.scss @@ -72,7 +72,7 @@ $mat-select-panel-max-height: 256px !default; } // TODO: Double-check accessibility of this style - [aria-required=true] &::after { + .mat-select-required &::after { content: '*'; } } diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index a8a7726c435..4a325420ee2 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -1572,6 +1572,17 @@ describe('MdSelect', () => { .toEqual('true', `Expected aria-required attr to be true for required selects.`); }); + it('should set the mat-select-required class for required selects', () => { + expect(select.classList).not.toContain( + 'mat-select-required', `Expected the mat-select-required class not to be set.`); + + fixture.componentInstance.isRequired = true; + fixture.detectChanges(); + + expect(select.classList).toContain( + 'mat-select-required', `Expected the mat-select-required class to be set.`); + }); + it('should set aria-invalid for selects that are invalid', () => { expect(select.getAttribute('aria-invalid')) .toEqual('false', `Expected aria-invalid attr to be false for valid selects.`); diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 493f5522b1a..b6f44023e81 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -132,6 +132,7 @@ export const _MdSelectMixinBase = mixinColor(mixinDisabled(MdSelectBase), 'prima '[attr.aria-invalid]': '_control?.invalid || "false"', '[attr.aria-owns]': '_optionIds', '[class.mat-select-disabled]': 'disabled', + '[class.mat-select-required]': 'required', 'class': 'mat-select', '(keydown)': '_handleClosedKeydown($event)', '(blur)': '_onBlur()',