MDC Select: Inconsistent styles across browsers for CSS-only multi-select

[acdvorak]

What MDC-Web Version are you using?

0.27.0

What browser(s) is this bug affecting?

Safari 11.0.1 (desktop)

What OS are you using?

macOS Sierra 10.12.6

What are the steps to reproduce the bug?

1. View the mdc-select demo page in both Safari and Chrome
2. Scroll down to "Select Multiple - CSS Only" section

What is the expected behavior?

The height of each <option class="mdc-list-item"> element should be 48px in all browsers.

What is the actual behavior?

Safari appears to ignore our height and padding values on <option class="mdc-list-item"> elements. As a result, they are rendered at a much shorter height than in other browsers, which deviates from spec.

Any other information you believe would be useful?

It looks like Safari isn't respecting -moz-appearance: none on .mdc-multi-select.

Screenshot of Chrome vs. Safari:

[acdvorak]

Firefox also appears to style the label on an <optgroup> with italics by default:

[kfranqueiro]

While we may have control over the italics, we don't have control over padding/margin in Safari at all. Some of this is a result of inconsistent cross-browser behavior in what browsers do/don't allow us to customize over native selects.

Another example is how Chrome overrides the selection color when the multiselect is focused, using the system selection color instead (at least on OS X).

We discussed this with design yesterday, and we ultimately want to aim to remove the native multiselect example, given the following factors:

• The aforementioned cross-browser inconsistencies beyond our control
• The fact that this doesn't directly align with anything in the Material Guidelines, whereas a checkbox list is present in the guidelines and can also be accomplished CSS-only if desired

I've entered #1792 to pursue checkbox list and decommission multiselect.