Text input default :focus styles in Firefox and MS Edge

[zachleat]

Currently:

Unfortunately looks like it’s tied to multiple CSS properties. Specifically anything related to border and background.

https://github.com/filamentgroup/formcore/blob/master/css/formcore.css#L110-L111
https://github.com/filamentgroup/formcore/blob/master/css/formcore.css#L137
https://github.com/filamentgroup/formcore/blob/master/css/formcore.css#L260

Commenting out the above lines gives us the default back:

[zachleat]

We can create and use our own outline definition here, of course. But it won’t be the OS default.

A la:

looks like:

[zachleat]

Reduced test case: https://jsbin.com/yopofej/

[zachleat]

Workaround: use :-moz-focusring instead of :focus to target a FF only outline style.

[zachleat]

Looks like the above fix does not apply to Windows 10/Firefox 49.

Looks like -moz-focusring is highly platform-dependent: https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring

[zachleat]

Per research by @fvsch it sounds like MS Edge has the same issue: https://twitter.com/fvsch/status/788790713416839171