CSS Text Input field not aligning top left?

I'm trying to have an Input Text Field display the text on the top left, right now the text is centered vertically and horizontally in the middle.

<input class="userInput" type="text">
<style>
.userInput {
text-align: left;
margin: 1px;
padding: 1px;
width: 500px;
height: 300px;
vertical-align: top;
}
</style>

Solution 1:

Text inputs are for single line input. I would suggest using <textarea> instead.

Example: https://jsfiddle.net/z58vy354/

Solution 2:

you should use textarea instead of input try this code:

<textarea rows="20" cols="50">
Test
</textarea>

Solution 3:

As other have suggested to use textarea instead of input field but you if don't wanna it to look like textarea or stretchable, you can use style resize:none; on it.