如何正确使用输入占位符？正在尝试对占位符使用转换，但它不起作用？截图如下答案

【问题标题】：How to use Input placeholder in a right way? Am trying to use transforms to placeholders but it does not work? screenshot is below如何正确使用输入占位符？正在尝试对占位符使用转换，但它不起作用？截图如下
【发布时间】：2017-01-03 18:27:03
【问题描述】：

如何正确使用输入占位符？我正在尝试对占位符使用转换，但它不起作用。 css在下面

【问题讨论】：

仅供参考，您可以在 StackOverflow 上发布标记，而无需截屏。您可以这样做吗？ :-)
我不知道该怎么做？
你能指导我怎么做吗？
@MuhammadAdnan 只需将代码中的 html 部分和 css 复制到问题中
谢谢我现在就做

标签： javascript css html sass

【解决方案1】：

这就是你要找的吗？有点难说，因为你还没有真正解释你的问题/问题..

.quote_form input[type=text]{
    font-size: 8px;
    transition: all 0.5s linear;
}

.quote_form input[type=text]:focus{
    padding-left: -10px; // to space the placeholder text away from the border 
    padding-top: -5px;
    font-size: 10px;
}

注意：在input 字段上设置宽度和高度时需要考虑填充：)

【讨论】：

我希望他在专注于那个输入时想在那个占位符上显示一些动画
是的，我想用 translate 为占位符设置动画

【解决方案2】：

通常，您可以触发 css transition 应用 pseudo selector，在您的情况下可能是 :focus。在这种情况下，我将font-size 用于inputs，以增加placeholder 的大小。请考虑添加您的 HTML 和 CSS 标记，以便我们为您提供“特定”解决方案。

一个例子，点击输入以聚焦：

input[type=text]{
font-size: 8px;
transition: all 0.5s linear;
border:1px solid black;
}
input[type=text]:focus{
padding-left: -50px;
font-size: 16px;
}

<input class="quote_form" type="text" name="fname" placeholder="placeholder"><br>
<input class="quote_form" type="text" name="lname" placeholder="placeholder">

【讨论】：