Safari 中未显示输入占位符文本答案

【问题标题】：Input placeholder text not showing in SafariSafari 中未显示输入占位符文本
【发布时间】：2023-02-15 16:01:31
【问题描述】：

我有一个带有占位符文本的 <input> 元素的 Mailchimp 注册表单。在 Chrome、Firefox 和 Microsoft Edge 上，它显示正常，但在 Safari（桌面和移动）上，占位符文本不显示。它是空白的。代码如下：

<input type="email" placeholder="Enter your email" onfocus="this.placeholder='Enter your email'" name="EMAIL" id="mce-EMAIL" class="required email" required="" aria-required="true">

我使用 web-kit 修复程序从自动完成中删除背景颜色，使用白色文本，并添加文本样式。

input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
select:-webkit-autofill,
select:-webkit-autofill:active,
select:-webkit-autofill:focus,
select:-webkit-autofill:hover,
textarea:-webkit-autofill,
textarea:-webkit-autofill:active,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:hover {
  background-color: #ED3A38 !important;
  transition: background-color 5000s ease-in-out 0s !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-size: 6vw !important;
}

以及按照this 指南更改占位符文本颜色和大小：

input:-webkit-autofill::first-line,
input:-internal-autofill-previewed,
::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
::-ms-input-placeholder,
:-moz-placeholder {
  -webkit-text-fill-color: #FFFFFF !important;
  font-size: 6vw !important;
  letter-spacing: -0.057em;
}

::placeholder {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

我坚持为什么这不起作用。有什么我想念的吗？

这是生产中的实例：link

【问题讨论】：

什么版本的 Safari/IOS？

标签： html css webkit

【解决方案1】：

你可以使用这个代码

&lt;textarea class="concerncommentArea" placeholder="Place you comment here"&gt;&lt;/textarea&gt;

【讨论】：

您的答案可以通过其他支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写出好的答案的信息in the help center。

【解决方案2】：

发布以供将来参考。出于某种原因，在 Safari 中，它显示在阴影内容（用户代理）并且在 input::placeholder 元素上应用了溢出。

我用以下代码覆盖了它：

input::placeholder {
   overflow: visible;
}

这似乎有效。奇怪......但如果它有效，它就会起作用。

【讨论】：

【解决方案3】：

如果您添加了任何自定义字体系列，请将其从元素继承的父容器中删除，它将正常工作。

【讨论】：