Textarea re-sizing does not work through HTML or CSS-CodePudding

I am having issues with re-sizing my textarea. The cols and rows attributes included in HTML do not seem to be working and when I try to re-size it in CSS through the normal width and height properties, the text is displayed in the middle of the box instead of in the top left:

.textarea input {
    resize: none;
    width: 100%;
    height: 150px;
}

textarea print screen with text displayed in centre

CodePudding user response：

You are using probably using the input tag. That's not a proper approach to add a full length text area. Try using the textarea tag and adjust the size using rows and columns attribute.

CodePudding user response：

If you want to use multiline handling then you should use textarea tag

CodePudding user response：

textarea {
  width: 100%;
  height: 150px;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 56px;
}