Jonathan Watt [:jwatt] Reporter
	Description • 6 years ago

In Chrome, `-webkit-appearance: menulist` applies native platform theming, whereas `-webkit-appearance: menulist` applies more basic non-native-platform theming. Currently our new implementation of `-moz-appearance: menulist-button` behaves the same as `-moz-appearance: menulist` (it applies platform native theming).

Given that when sites use `-webkit-appearance: menulist` they also seem to also set border properties, they will get the simpler styling in Firefox as they do in Chrome though. So probably not super important to change.

	Jonathan Watt [:jwatt] Reporter
	Comment 1 • 6 years ago

I should note that in the crawl that MS did:

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

this value was encountered on 0.134% of pages which is frequent enough for us to care. However, it primarily seems to be used to fix iOS Safari to allow styling of <select>, since setting border etc. apparently didn't/doesn't work without it there. There was also a request to add this to normalize.css for that reason, but that didn't happen due to compatibility issues:

https://github.com/necolas/normalize.css/issues/151
https://github.com/necolas/normalize.css/issues/572
http://www.curiouscrane.com/2015/10/creating-custom-selects-without-losing-the-ios-picker-on-iphones/
https://php.quicoto.com/how-to-style-a-select-dropdown-with-css/
https://www.quora.com/Where-can-I-get-a-source-code-of-beautiful-form-in-HTML-and-CSS-with-fields-like-name-roll-number-select-course-in-the-form-of-a-dropdown-etc

To a much lesser extent there did seem to be a few other uses, such as it being used to style arbitrary elements:

https://stackoverflow.com/questions/4457834/how-to-use-moz-appearance-to-display-a-menulist-button

and sometimes used on date/time related form fields?:

https://opensource.apple.com/source/WebCore/WebCore-7604.1.38.1.6/css/html.css.auto.html

	Jonathan Watt [:jwatt] Reporter
	Comment 2 • 6 years ago

Oh, and on <div>:

 * Firefox will no longer display the contents, whereas Chrome will
 * Firefox shows button on left, Chrome on the right
 * Firefox reacts to mousedown, Chrome doesn't

But I think these are just accidents of how things are implemented differently, and not something that any significant amount of web content is relying on (I didn't find and don't expect content authors to use this value on <div>).