Webkit外观的样式来自哪里?

时间:2019-10-04 06:53:56

标签: css safari webkit mobile-safari appearance

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

enter image description here

You can view the user agent stylesheet of Safari here不包含(据我所知)使用日期类型进行输入的样式,如上图所示。

看起来大部分样式是通过用户代理样式表中的单个CSS属性完成的,

-webkit-appearance: menulist-button;

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

这些样式来自哪里(如果不是来自用户代理样式表)?

1 个答案:

答案 0 :(得分:0)

在大量研究和研究了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.

不是