Как получить заполнитель и текст, чтобы начать с начала текстовой области?

Question

Как получить заполнитель / текст в верхнем левом углу текстовой области? Сейчас он в центре.

.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

, если вы хотите 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>

Answer 2

Простейшим будет заменить элемент ввода на элемент текстовой области. Если вы все еще хотите добиться с помощью элемента ввода, вы можете попробовать стилизовать псевдоэлемент заполнителя, отрегулировав положение в соответствии с вашими потребностями

::-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 3

Надеюсь, это поможет вам.

.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 4

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 5

Если вы измените 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>```