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

Question

input type='text' 高度为的元素中的占位符文本100px垂直居中。我希望它在顶部对齐。

JSFiddle

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

我已经把伪选择器从#description块中取出来，所以它们没有被编译成，#description ::-webkit...但这不起作用。我已经尝试了所有类型的垂直对齐组合，但无法弄清楚。也许占位符伪选择器不是正确的路径？我们正在使用引导程序，但我找不到任何会导致它在占位符中强制垂直对齐的东西，或者任何实现顶部对齐占位符文本的引导程序。

编辑：没有 LESS 编译错误。我已经确认伪选择器正在编译到.css文件中。

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

Answer 1

尝试这个 ：

:placeholder-shown用于在显示占位符文本时选择输入本身。与设置占位符文本样式的::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/