1481632 - Consider aligning the behavior of `-moz-appearance: caret` more closely with Chrome

Status: NEW

(Core :: Layout, enhancement, P4)

Description

[Jonathan Watt [:jwatt]]

This value seems to be used with '-webkit-appearance' to disable the inner-shadows for input fields on iOS Safari:

https://trentwalton.com/2010/07/14/css-webkit-appearance/

However, that can cause problems on desktop:

https://stackoverflow.com/questions/23557729/webkit-appearance-caret-removes-input-border-from-android-and-windows-browser

On macOS, Chrome doesn't show a border for <input type=text> when this value is set, but does show platform native themed focus highlight when focused. Safari on the other hand only shows the caret, even when focused. Firefox doesn't change the theming at all.

I suspect the behavior on desktop in Chrome/Safari may possibly be an accident, but we should consider removing the border to match them when this value is used.

That said, even if this wasn't an accident, according to the crawl that MS did for Edge:

https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/css/-webkit-appearance/

this value was only encountered on 0.076% of pages, so probably not a big priority even then, and only a slight visual annoyance if any sites actually care.