komali_2 komali_2 - 23 days ago 7
CSS Question

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

Placeholder text in a

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

JSFiddle

enter image description here

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

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/

Comments