Change the comment input pointer to top-CodePudding

I want the pointer inside the comment input box which gets located in the middle on focus. I want it to be at the top

div{
width: 300px;
height: 300px;

}

div label{
display: block;
font-family: arial;
}

div input{
width: 200px;
height: 200px;
}

<div>
<label for="comment">Comment</label>
<input name="comment">
</div>

CodePudding user response：

Are you sure you don't want to use textarea instead of a text input for a comment?

<textarea id="comment" name="comment" rows="4" cols="50">
Are you sure you don't want to use the textarea tag instead?
</textarea>

And if you still want it centered you can just add: text-align: center

CodePudding user response：

Don't use input, you should use textarea. Using an input with a fixed height and width will not change where the cursor starts. It will just extend the input itself. textarea is nice because it has a built-in tool where you can resize the text box vertically or horizontally, it will grow based on the amount of text. Instead of defining a preset height and width on it, you can just specify the rows="" and col="" count in your markup.

div{
width: 300px;
height: 300px;

}

div label{
display: block;
font-family: arial;
}

<div>
<label for="comment">Comment</label>
<textarea name="comment" rows="15" cols="30"></textarea>
</div>