文本框中的光标位于中间而不是顶部

Question

我有一个文本框，用户可以在其中输入评论；但是，当用户在文本框中单击时，光标会在他们键入时位于文本框的中间（见图 1）。

如何将光标定位在文本框的左上角，就像图片 #2 中显示的那样？

如有任何帮助，我们将不胜感激！

      <form className="comment-form" action="/comments" method="post">
        <input type="hidden"
               name="authenticity_token"
               value={this.props.token}/>

        <label htmlFor="comment[body]">Comment</label>
        <input name="comment[body]" type="textarea" rows="1" cols="50" wrap="physical" id="comment_text_area" />

        <label htmlFor="image[image]">Image</label>
        <input name="comment[image]" type="file" />

      <div className="request-actions">
        <button>Comment on Request</button>
        <a onClick={this.props.closeEditor}>Cancel</a>
      </div>
      </form>

.comments {
  margin: 20px 0;
}

.comment {
  background-color: $light-grey-5;
  padding: rem-calc(10);
  border-bottom: 3px solid White;
  font-size: 13px;
}

.comment__user {
  color: $black;
}

.request__comment {
  margin-bottom: 20px;
}

.comment-form input[type="textarea"] {
    width: 500px;
    height: 150px;
    font-size: 16px;
    border: 2px solid #ccc;

}

@media #{$screen} and (max-width: #{$medium-breakpoint}) {
  .comments { margin-left: 0px; }
  .comment-content { margin-top: 10px; }
}

Answer 1

没有<input type="textarea" />.

改为：

<textarea name="comment[body]" rows="1" cols="50" wrap="physical" id="comment_text_area"></textarea>

Answer 2

解决方案是使用文本区域而不是输入。我在解决方案和解释中发现了这个类似的问题 here

显示使用这个：

input {
 padding-top: 0;
 padding-left: 0;
 line-height: 1em; // this probably doesn't matter
}

文本框中的光标位于中间而不是顶部

Cursor in textbox located in the middle instead of the top

html

css

textbox

position

cursor