How do I prevent placeholder text from being vertically centered in a large height input form element?

Question

Placeholder text in a input type='text' element with a height of 100px is vertically centered. I want it aligned on the top.

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

I have fiddled with taking the psuedo selectors out of the #description block so they aren't compiled to #description ::-webkit... but that didn't work. I have tried all types of combinations of vertical-align and can't figure it out. Maybe the placeholder psuedo selector isn't the right path? We're using bootstrap but I can't find anything that would cause it to force a vertical align in a placeholder, or any bootstrappy way to achieve a top-aligned placeholder text.

EDIT: There are no LESS compile errors. I have confirmed the psuedo-selectors are being compiled into the .css files.

EDIT: I had a brain fart and was trying to build a big text area the hard way. Textareas exist, use those if you have found yourself here.

Answer 1

Try this :

:placeholder-shown is for selecting the input itself when it's placeholder text is being shown. As opposed to ::placeholder which styles the placeholder text.

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

In my code this pseudo-element started to respond to our styling only with !important.

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

Answer 2

Use padding:

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

Demo: https://jsfiddle.net/5u83oL78/3/