为输入焦点上的占位符提供边距/填充

Question

基本上我想通过在焦点上填充底部占位符来进行一些输入转换，但它不起作用

.formInput{
   transition: padding-bottom 0.3s;
}
.formInput:focus::placeholder {
  padding-bottom: 100px !important;
}

我可以给它一个颜色，它会在焦点上改变，但是

padding-bottom

不起作用，

margin

也不起作用

Answer 1

在输入元素中使用占位符文本时，CSS 属性（例如 padding-bottom 和 margin）不会直接应用于 ::placeholder 伪元素。这是因为

::placeholder

伪元素的设计目的不是像其他元素一样处理布局属性。

但是，如果您仍然想移动

::placeholder

伪元素：

.formInput::placeholder {
  transition: transform 0.3s;/* smooth transition of placeholder when focused */
}

.formInput:focus::placeholder {
  transform: translateY(100%);/* to move up */
}