gpt4 book ai didi

css - 将 textarea 占位符文本放在底部

转载 作者:行者123 更新时间:2023-12-03 18:02:55 26 4
gpt4 key购买 nike

我想将我的 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;
}

这是完整的 codepen .我想将文本区域和输入的占位符设置为靠近输入和文本区域的底部。目前,它们位于文本区域和输入的顶部。有什么方法可以选择文本区域和输入的占位符以及靠近文本区域底部的位置,靠近边框?

最佳答案

我不知道仅使用 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

关于css - 将 textarea 占位符文本放在底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41731137/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com