テキストボックス内のカーソルが上部の代わりに中央に配置されています

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 
}