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

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

解决方案是使用textarea而不是输入。我用解决方案和解释here

找到了类似的问题

它显示使用它：

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