我一直在关注这个小教程,将动画添加到输入字段的占位符.当输入字段被聚焦时,动画将占位符移出输入字段.
此动画在输入字段上完美地工作,并且占位符在输入字段上方可见,但是当我将此动画添加到textarea时,占位符一旦通过textarea的边缘就会消失.
input,
textarea {
margin: 30px 0 0 0;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder{
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
visibility: visible !important;
}<input type="text" id="edit-field-name-0-value" value="" size="60" maxlength="255" placeholder="Name *" required="required">
<textarea rows="8" cols="60" placeholder="Message *" required="required"></textarea>这是一个证明问题的JSFiddle.
有没有人知道我怎么也可以在它上面显示textarea的占位符？