Where are the styles for webkit-appearance coming from?

Question

I understand the basic idea behind the -webkit-appearance property and how it applies platform-native styling to an element. But I don't understand where these platform-native styles are defined. I thought they might be in the user agent stylesheet but there are no styles present that make, for example, the <input type="date" /> look like this in mobile Safari:

You can view the user agent stylesheet of Safari here which does not include (as far as I know) styles that make an input with the type of date render like the above image.

It appears the most of the styling is done through a single CSS property within the user agent stylesheet, which is:

-webkit-appearance: menulist-button;

This drastically changes the visual output of the input on mobile Safari to look like the example image.

Where are these styles coming from if not from the user agent stylesheet?

Answer 1

After much investigating and digging into the Webkit source code, I found the answer.

In the context of Webkit based browsers, elements that have an appearance CSS property applied to them do not receive their platform-native styles from the browser's user agent stylesheet. These styles are defined outside of the UA stylesheet in a renderTheme file which is part of the internals of the Webkit engine.

For example, you can find the styles I was asking for in my original question being defined here: https://trac.webkit.org/browser/webkit/trunk/Source/WebCore/rendering/RenderThemeIOS.mm#L623

To break this all down: in mobile Safari, an <input type="date" /> receives -webkit-appearance: menulist-button from the user agent stylesheet of Safari. The additional styling applied by -webkit-appearance: menulist-button which is not in the user agent stylesheet is defined within a renderTheme file of Webkit.