我了解-webkit-appearance
属性背后的基本概念以及它如何将平台本机样式应用于元素。但是我不明白这些平台本机样式的定义位置。我以为它们可能在用户代理样式表中,但是目前没有任何样式可以使<input type="date" />
在移动Safari中看起来像这样:
You can view the user agent stylesheet of Safari here不包含(据我所知)使用日期类型进行输入的样式,如上图所示。
看起来大部分样式是通过用户代理样式表中的单个CSS属性完成的,
-webkit-appearance: menulist-button;
这将大大改变移动Safari上输入的视觉输出,使其看起来像示例图像。
这些样式来自哪里(如果不是来自用户代理样式表)?
答案 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.