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

【问题标题】：Keep placeholder when focused in webkit browser using css使用 css 在 webkit 浏览器中聚焦时保留占位符
【发布时间】：2015-02-19 22:22:35
【问题描述】：

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

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

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

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

欢迎任何答案和/或想法。

【问题讨论】：

你能澄清你的要求吗？也许只有我一个人，但我很困惑。
我想让我的占位符在输入字段上，一旦聚焦就可见。这不是默认行为。 “修复”仅涉及 webkit 系列，所有其他浏览器在此线程中无关紧要。我想使用 CSS 来保留占位符，直到用户开始输入...
这不是正常行为吗？每个placeholder 属性都会这样做。
PyGTK webkit 浏览器的默认行为是在焦点上移除它。
您有什么特别的理由不使用 JavaScript 来方便地实现这一点吗？

标签： css webkit

【解决方案1】：

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

例子：

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

【讨论】：