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

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 block 中取出，这样它们就不会被编译为 #description::-webkit... 但那并没有工作。我已经尝试了所有类型的 vertical-align 组合，但无法弄清楚。也许占位符伪选择器不是正确的路径？我们正在使用 bootstrap，但我找不到任何会导致它在占位符中强制垂直对齐的东西，或者任何 Bootstrap 方法来实现顶部对齐的占位符文本。

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

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

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/