Как помещать текст заполнителя вертикально центрировать в элемент формы большой высоты?

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..., но это не сработало. Я пробовал все типы комбинаций вертикального выравнивания и не могу понять это. Может быть, селектор псевдонимов-заполнителей - это не правильный путь? Мы используем bootstrap, но я не могу найти ничего, что могло бы заставить его принудительно установить вертикальный выравниватель в заполнителе или любой способ загрузки, чтобы получить текст с верхним выравниванием.

EDIT: ошибок компиляции LESS нет. Я подтвердил, что psuedo-selectors скомпилированы в файлы .css.

EDIT: У меня был мозговой пердит, и я старался построить большую текстовую область. 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; 
    } 

В моем коде этот псевдоэлемент начал отвечать на наш стиль только важными.

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

Answer 2

Использование обивка:

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

Демо: https://jsfiddle.net/5u83oL78/3/