我了解-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
中[[不是
renderTheme
file of Webkit.应用的其他样式。