作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想将我的 textarea 的占位符文本放置在 textarea 的底部。这是我的代码:
<p class="text">
<textarea name="text" class="feedback-input" id="comment" placeholder="Vos remarques"></textarea>
</p>
textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize:vertical;
}
最佳答案
我不知道仅使用 CSS 来解决您的问题的解决方案。
我使用 CSS + Javascript 创建了一个解决方案。
HTML:
<div class="form-group">
<label class="placeholder">Vos remarques</label>
<textarea name="text" class="feedback-input" id="comment"></textarea>
</div>
.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;
}
$(document).ready(function(){
$('.feedback-input').on('input', function(){
if ( $(this).val().length > 0 ) {
$(this).siblings().css("opacity", "0");
} else {
$(this).siblings().css("opacity", "1");
}
});
});
关于css - 将 textarea 占位符文本放在底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41731137/
我是一名优秀的程序员,十分优秀!