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>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
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;
}
textarea {
resize: none;
}<div>
<label for="comment">Comment</label>
<textarea name="comment" rows="15" cols="30"></textarea>
</div>