Позиция textarea текст заполнителя внизу

Question

Я хотел бы разместить текст заполнителя textarea в нижней части текстового поля. Вот мой код:

<p class="text"> 
    <textarea name="text" class="feedback-input" id="comment" placeholder="Vos remarques"></textarea> 
</p> 

CSS:

textarea { 
    width: 100%; 
    height: 150px; 
    line-height: 150%; 
    resize:vertical; 
} 

Вот полный codepen. Я хочу, чтобы метки заполнителей текстовых полей и входов были расположены вблизи нижней части входных и текстовых полей. В настоящее время они расположены в верхней части текстовой области и входов. Есть ли способ выбрать заполнители для текстового поля и ввода и положение в нижней части текстовой области, рядом с границей?

Answer 1

Я не знаю решения, использующего только CSS, чтобы решить вашу проблему. Я создал решение, используя CSS + Javascript.

HTML:

<div class="form-group"> 
    <label class="placeholder">Vos remarques</label> 
    <textarea name="text" class="feedback-input" id="comment"></textarea> 
</div> 

CSS:

.form-group { 
    position: relative; 
} 
textarea { 
    width: 100%; 
    min-height: 150px; 
    resize: vertical; 
    position: relative; 
} 
.placeholder { 
    bottom: 10px; 
    color: #ccc; 
    font-family: arial; 
    position: absolute; 
    text-align: center; 
    width: 100%; 
    z-index: 1; 
    -webkit-transition: all ease-out 0.5s; 
    transition: all ease-out 0.5s; 
} 

JavaScript (JQuery):

$(document).ready(function(){ 
    $('.feedback-input').on('input', function(){ 
     if ($(this).val().length > 0) { 
      $(this).siblings().css("opacity", "0"); 
     } else { 
      $(this).siblings().css("opacity", "1"); 
     } 
    }); 
}); 

codepen.io Example