使用 css 在 webkit 浏览器中聚焦时保留占位符

Question

我目前有一个未知的浏览器，它会在聚焦文本字段时清除 placeholder 文本。我怎样才能使用 CSS 将文本保持在原位直到用户键入或者这是不可能的？

我的想法是这样的。占位符不会被删除，而只是使用 CSS 或其他方式隐藏，因此即使默认情况下不显示，也可以对其进行操作以显示。我希望至少 webkit 应该有这样的功能（不需要它在任何其他基于 webkit 的浏览器中工作）。

以下代码将更改占位符的默认颜色：

[placeholder]::-webkit-input-placeholder {
    color: #888888;
}

欢迎任何回答and/or想法。

Answer 1

你可以，只为webkit，添加一个-webkit-transition-duration 属性无限时间来延迟占位符消失。但是，除非您希望文本和占位符重叠，否则当用户开始键入时，您必须使用 Javascript 将值更改为 0s。

示例：

[placeholder]::-webkit-input-placeholder {
    color: #888888;
    -webkit-transition-duration:86400s; // 24 hours
}

Keep placeholder when focused in webkit browser using css