html - CSS - Webkit 转换不适用于输入类型

Question

我为我的表单设置了 webkit 转换，当您单击文本字段时，占位符会使用转换消失。然而，相同的转换正在处理表单 contact。表格，但不在 sign up 上形式。使用的过渡是

-webkit-transition: box-shadow 30ms ease-in-out;

可能是什么问题？

Answer 1

您发布的 CSS 转换无关紧要。过渡与 box-shadow 属性无关。

您正在转换一页上的 text-indent 属性，而不是另一页。看起来您需要设置 ::-webkit-input-placeholder pseudo element 的样式.有关 ::-webkit-input-placeholder pseudo element 的更多信息，请参阅 MDN 文档。

因此，添加以下内容:

::-webkit-input-placeholder {
    -webkit-transition: text-indent .5s ease,color .5s ease;
    color: #899096;
}
[placeholder]:focus::-webkit-input-placeholder {
    text-indent: 10em;
    color: transparent;
}

<input type="text" placeholder="Some placeholder" />

我在我的浏览器中对其进行了测试，它似乎在 Chrome/Safari 中按预期工作。