form-field(select): update styling to match current version of the spec

[VamsiDharmaji]

Bug, feature request, or proposal:

Bug

Mat-Select : Dropdown arrow is not vertically centered in the outline styled .

What is the expected behavior?

Dropdown arrow is should be vertically centered in the outline styled .

What is the current behavior?

Dropdown arrow is not vertically centered in the outline styled .

Notice that in contrast filled style has thin ( 1px ) border

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

URL: https://stackblitz.com/edit/angular-jei8z9?file=app%2Fselect-overview-example.html

What is the use-case or motivation for changing an existing behavior?

UX

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular and Material 7+

Is there anything else we should know?

I am more than happy to help fix this issue, please let me know if can create a pull request

[mmalerba]

I recommend using a label rather than a placeholder: https://stackblitz.com/edit/angular-jei8z9-csd356?file=app/select-overview-example.html

The label will appear aligned with the arrow, while the placeholder will appear in the same place that the value would

[VamsiDharmaji]

@mmalerba We have both label and placeholder texts. Cannot use placeholder text as label.

[mmalerba]

In an older version of the spec the value was intentionally not centered (similar to the way it is for the filled version of the form-field in the spec today). The spec has since changed, so we will need to update the styles to center the text