下部にプレースホルダテキストを配置する

Question

テキストエリアのプレースホルダテキストをテキストエリアの下部に配置したいと思います。ここに私のコードは次のとおりです。

<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