如何正确使用Input占位符？ 是否正在尝试对占位符使用转换，但不起作用？ 屏幕截图如下

Question

How to use Input placeholder in a right way? I am trying to use transforms to placeholders, but it does not work. css is below

Answer 1

Is this what you're looking for? Kind of difficult to tell, as you haven't really explained your question / problem..

.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;
}

Note that : the padding needs to be accounted for when setting your width and height on the input field :)

Answer 2

Generally, you can trigger css transition applying a pseudo selector , in your case could be :focus . In this case I use font-size for inputs in order to increase the size of the placeholder . Please consider adding your HTML and CSS markup so we can provide you a "specific" solution.

An example, click to the input in order to focus:

 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">