Position textarea placeholder text unten

Question

Ich möchte den Platzhaltertext meines Textarea an den unteren Rand des Textfelds positionieren. Hier ist mein Code:

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

Hier ist ein voll codepen. Ich möchte die Platzhalter von Textareas und Eingaben so einstellen, dass sie in der Nähe der Eingabe- und Textbereiche liegen. Derzeit befinden sie sich am oberen Rand des Textbereichs und der Eingaben. Gibt es eine Möglichkeit, die Platzhalter für den Textbereich und die Eingaben auszuwählen und am unteren Rand des Textbereichs in der Nähe der Grenze zu positionieren?

Answer 1

Ich kenne keine Lösung, die nur CSS verwendet, um Ihr Problem zu lösen. Ich habe eine Lösung mit CSS + Javascript erstellt.

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