如何防止占位符文本在大高度输入表单元素中垂直居中？

Question

高度为input type='text'的{​​{1}}元素中的占位符文字是垂直居中的。我希望它在顶部上对齐。

JSFiddle

100px

Product.html

<div class="form-group"> <label for="description">Description</label> <input type="text" name="description" id="description" placeholder="Enter a new product description..." class="form-control" /> </div>

product.less

我已经摆弄了从#description{ height: 100px; ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ vertical-align: top; } ::-moz-placeholder { /* Firefox 19+ */ vertical-align: top; } :-ms-input-placeholder { /* IE 10+ */ vertical-align: top; } :-moz-placeholder { /* Firefox 18- */ vertical-align: top; } } 块中取出psuedo选择器，因此它们没有被编译为#description，但这并没有奏效。我已尝试过所有类型的vertical-align组合，但无法弄清楚。也许占位符psuedo选择器不是正确的路径？我们正在使用bootstrap，但我找不到任何会导致它在占位符中强制垂直对齐的内容，或者任何引导方式来实现顶部对齐的占位符文本。

编辑：没有LESS编译错误。我已经确认psuedo-selectors正在编译成#description ::-webkit...个文件。

编辑：我有一个大脑放屁，并试图以艰难的方式建立一个大文本区域。 Textareas存在，如果你发现自己在这里，请使用它们。

Answer 1

试试这个：

：占位符显示用于在显示占位符文字时选择输入。与 :: placeholder 相反，后者对占位符文本进行样式化。

#description{
  height: 100px; 
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    position: relative !important;
    transform:translateY(-220%) !important;
    color:red !important;
  }
  input::-moz-placeholder { /* Firefox 19+ */
    vertical-align: top;
  }
  input::-ms-input-placeholder { /* IE 10+ */
    vertical-align: top;
  }

在我的代码中，这个伪元素开始仅使用！important来响应我们的样式。

https://jsfiddle.net/5u83oL78/2/

Answer 2

使用填充：

input.form-control {
   padding: 0px 12px 60px 12px;
}

演示：https://jsfiddle.net/5u83oL78/3/