如何讓占位符和文本從textarea的開頭開始？

Question

如何在 textarea 的左上角開始獲取占位符/文本？ 它現在在中心。

 .input-textarea { width: 100%; min-height: 100px; resize: vertical; padding: 1em; border-radius: 3px; }

 <label class="comment-label" for="comments">Comments</label> <input type="textarea" name="comments" id="comments" class="input-textarea" placeholder="Enter your comments here..." required>

輸出

Answer 1

如果您將 HTML 更改為使用 textarea 元素，它將按照您的意願工作。 輸入元素不打算以這種方式使用。

<label class="comment-label" for="comments">Comments</label>
<textarea name="comments" id="comments" class="input-textarea" placeholder="Enter your comments here..." required></textarea>```

Answer 2

希望這對你有幫助。

 .input-textarea { width: 100%; min-height: 100px; resize: vertical; padding: 1em; border-radius: 3px; position: relative; } .placeholder { position: absolute; left: -10px; top: 2px; background-color: white; padding: 0 20px; } .input-textarea:focus~.placeholder, .input-textarea:valid~.placeholder { display: none; } .parent { position: relative; }

 <label class="comment-label" for="comments">Comments</label> <div class="parent"><input type="textarea" name="comments" id="comments" class="input-textarea" placeholder="" required> <span class="placeholder">Enter your comments here...</span></div>

Answer 3

 textarea.comment { height: 59px; resize: none; width: 100%; padding-top: 16px; padding-left: 22px; }

 <textarea class="comment" placeholder="Enter your comments here..." spellcheck="false"></textarea>

Answer 4

最簡單的方法是用文本區域元素替換輸入元素。 如果您仍然想使用輸入元素實現，您可以嘗試通過根據需要調整位置來設置占位符偽元素的樣式

::-webkit-input-placeholder {
       position:relative;
       top:-35px;
    }

    :-moz-placeholder { /* Firefox 18- */
       position:relative;
       top:-35px;  
    }

    ::-moz-placeholder {  /* Firefox 19+ */
       position:relative;
       top:-35px; 
    }

    :-ms-input-placeholder {  
       position:relative;
       top:-35px; 
    }

Answer 5

如果你想vertical-align你的placeholde r 和插入符號來輸入你的評論，你可以使用contenteditable div + flex 。

這是這個想法的一個例子：

 label { display: block; } .flxbx { display: flex; align-items: center; min-height: 100px; border: solid; background: white; color: black; } .flxbx, label { padding: 0.5em; margin: 0.5em; } .flxbx:empty::before { content: attr(data-placeholder); } body { background: #222; color: white; }

 <label>Comments</label> <div class="flxbx" data-placeholder="Enter your comment here.." contenteditable></div>