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文档。

因此，请添加以下内容：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

1 个答案: