How to change the input position to the top-CodePudding

I have a text input, which when I type a text it's centered horizontally, but I want to make it in the top. this is the code :

height: 143px;
width: 782px;
font-family: 'Roboto Mono';
background: #FFFFFF;
border: 1px solid #000000;
border-radius: 4px;
@media screen and (max-width: 950px) {
  width: 100%;
}

That's how it looks like

Input

I want instead to display the text typed in the top.

CodePudding user response：

When you give the input a height, its the same as if you were to just add vertical padding to it, for what your trying to achieve a textarea tag would make more sense.

input.too-tall {
  height: 143px;
  width: 100%;
  font-family: 'Roboto Mono';
  background: #FFFFFF;
  border: 1px solid #000000;
  border-radius: 4px;
}

input.regular {
  width: 100%;
  font-family: 'Roboto Mono';
  background: #FFFFFF;
  border: 1px solid #000000;
  border-radius: 4px;
}

textarea {
  height: 143px;
  width: 100%;
  font-family: 'Roboto Mono';
  background: #FFFFFF;
  border: 1px solid #000000;
  border-radius: 4px;
}

<h2>Weird input area</h2>
<input >

<br>
<h2>Regular input area</h2>
<input >

<br>
<h2>Textarea</h2>
<textarea></textarea>

CodePudding user response：

Use directly this <textarea rows="number"> instead of CSS.

For example:

<form>
   <label>Text area</label>
   // <input type="text">
   // play with the rows in textarea field
   <textarea rows="10" />
</form>

See this live code: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_textarea_cols