Remove native Firefox focus indicator in selects

Bugs

What MDC Web Version are you using?

0.36.1

What browser(s) is this bug affecting?

Firefox 60 (I assume any other earlier too)

What OS are you using?

Linux

What are the steps to reproduce the bug?

Open a Firefox browser and go to: https://material-components.github.io/material-components-web-catalog/#/component/select
Move the focus to any of the select widgets
You will see this:

What is the expected behavior?

Just the Material focus indicator.

What is the actual behavior?

You also see a dim box surrounding the native select, breaking the Material illusion that the whole thing is a single control.

Any other information you believe would be useful?

The workaround is to add the following css:

// Clears firefox native focus ring for mdc-selects
@-moz-document url-prefix() {
    .mdc-select, select, select:-moz-focusring, select::-moz-focus-inner {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
       background-image: none !important;
       border:0;
    }
}

Note that it is constrained to mdc-selects, because native selects not in mdc should not be affected.

I would do a PR but i have no idea where the sass is the proper place for it.

material-components / material-components-web

Remove native Firefox focus indicator in selects #2989