How to align textarea's placeholder to the right bottom?

Question

I can position the placeholder to the right bottom of the textarea at first place, but the placeholder position will be reset after you enter some text and clear the text. anyone know how to prevent the placeholder resetting the position once the text been cleared?

 textarea { display: block; height: 150px; } textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */ position:absolute; bottom: 10px; right: 16px; color: red; }

 <textarea placeholder="test"> </textarea>

Answer 1

You can use this trick

 * { box-sizing: border-box; }.form-group { position: relative; max-width: 200px; } label { position: absolute; right: 10px; bottom: 10px; display: inline-block; } textarea { width: 100%; padding: 20px; }

 <div class="form-group"> <label>test</label> <textarea rows="5"></textarea> </div>

This Will always stick to the end of the textarea, length no matter. One more thing you can add jQuery function to hide label when it have some value.

Answer 2

You can use the ::placeholder selector, and then just apply a text-align:right . Then to make it appear at the bottom, apply a transform:translateY(x) where x is the height of the input.

 textarea { width:500px; height:150px; } textarea::placeholder { text-align:right; transform: translateY(150px); }

 <textarea placeholder="Lorem Ipsum"></textarea>

Answer 3

If you want the placeholder-text to align to the right of the textarea , you can simply use:

textarea::placeholder {
  text-align: right;
}

In order to align the placeholder-text at the bottom of the textarea , one approach is to give the placeholder-text a line-height which corresponds to:

• twice the height of the textarea minus the font-size of the placeholder-text

We can do this manually (ie. every time we update the height of the textarea we also update the line-height of the placeholder-text ) but it's more efficient here to use CSS Custom Properties and calc() .

If we establish the following custom properties:

:root { 
  --textareaHeight : 150px;
  --placeholderFontSize : 14px;
}

then we know the line-height of the placeholder-text is always:

calc((var(--textareaHeight) * 2) - var(--placeholderFontSize))

This means we can now change the values for --textareaHeight and --placeholderFontSize arbitrarily and the line-height of the placeholder-text will always calculate correctly.

Working Example:

 :root { --textareaHeight: 150px; --placeholderFontSize: 14px; } textarea { display: block; height: var(--textareaHeight); padding: 0 6px 6px 0; } textarea::placeholder { text-align: right; font-size: --placeholderFontSize; line-height: calc((var(--textareaHeight) * 2) - var(--placeholderFontSize)); color: red; }

 <textarea placeholder="test"></textarea>