webkit-appearance 的样式从何而来？答案

【问题标题】：Where are the styles for webkit-appearance coming from?webkit-appearance 的样式从何而来？
【发布时间】：2020-02-02 11:48:04
【问题描述】：

我了解 -webkit-appearance 属性背后的基本思想，以及它如何将平台原生样式应用于元素。但我不明白这些平台原生样式是在哪里定义的。我认为它们可能在用户代理样式表中，但没有样式可以使例如 <input type="date" /> 在移动 Safari 中看起来像这样：

You can view the user agent stylesheet of Safari here 不包括（据我所知）像上图那样使用日期渲染类型进行输入的样式。

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

-webkit-appearance: menulist-button;

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

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

【问题讨论】：

请您分享链接或代码，以便我和其他人研究它以提供更好的解决方案
当然，我已经添加了一个链接，这是一个简单的场景。
这是默认的，所以可以用你自己的css覆盖它，比如'-webkit-appearance: none;'
谢谢，但这并不能回答我原来的问题。我不想覆盖它，我想找出定义这些默认样式的位置。
是的，您可以覆盖它，因为我为您提供 css 代码，我们在浏览器中看到的 html 元素有一些默认属性，它就是其中之一

标签： css safari webkit mobile-safari appearance

【解决方案1】：

经过对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.

【讨论】：