Webkit外观的样式来自哪里？

Posted 2021-04-28

我了解-webkit-appearance属性的基本概念，以及它如何将平台本机样式应用于元素。但是我不明白这些平台本机样式的定义位置。我以为它们可能在用户代理样式表中，但是目前没有任何样式可以使<input type="date" />在移动Safari中看起来像这样：

You can view the user agent stylesheet of Safari here，其中不包括（据我所知）使用日期类型进行输入的样式，如上图所示。

似乎大部分样式是通过用户代理样式表中的单个CSS属性完成的，这是：

-webkit-appearance: menulist-button;

这将大大改变移动Safari上输入的视觉输出，使其看起来像示例图像。

如果不是来自用户代理样式表，这些样式来自哪里？

答案

[在大量研究和研究了Webkit源代码之后，我找到了答案。

在基于Webkit的浏览器的上下文中，对其应用了appearance CSS属性的元素不从浏览器的用户代理样式表中接收其平台原生样式。这些样式在UA样式表的renderTheme文件中定义，该文件是Webkit引擎内部的一部分。

例如，您可以在此处定义的原始问题中找到我要的样式：https://trac.webkit.org/browser/webkit/trunk/Source/WebCore/rendering/RenderThemeIOS.mm#L623

分解全部：在移动Safari中，<input type="date" />从Safari的用户代理样式表中接收-webkit-appearance: menulist-button。用户代理样式表-webkit-appearance: menulist-button中[[不是

的is defined within a renderTheme file of Webkit.应用的其他样式。