将 textarea 占位符文本放置在底部

Question

我想将我的 textarea 的占位符文本定位到 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;
}

这是一个完整的代码笔。我想将 textareas 和 input 的占位符设置为靠近 input 和 textarea 的底部。目前，它们位于文本区域和输入的顶部。有什么方法可以选择 textarea 和 input 的占位符以及靠近文本区域底部、靠近边框的位置吗？

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 示例