Input text aligning at the center with extra padding at the top and bottom

Question

I'm creating an input element with a fixed height. But I'm getting some unwanted padding when I input a text both at the top and bottom. Also when the text is long, it is creating a horizontal scroll along the x-axis instead of splitting the line into 2 / multiples lines.

How to fix this?

.input--custom {
  border: 0.1px solid #cfd7fd;
  padding: 5px;
  display: block;
  height: 100px;
  width: 100%;
  box-sizing: border-box;
  word-break: break-word;
  overflow: hidden;
}

.input--width {
  height: 100px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

<div>
  <input type="textArea" placeholder="Type your message here and click submit" class="input--custom input--width ">
</div>

Answer 1

You need to use a textarea element rather than an input element. See below and this entry on StackOverflow:

.input--custom {
  border: 0.1px solid #cfd7fd;
  padding: 5px;
  display: block;
  height: 100px;
  width: 100%;
  box-sizing: border-box;
  word-break: break-word;
  overflow: hidden;
}

.input--width {
  height: 100px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

<div>
  <textarea placeholder="Type your message here and click submit" class="input--custom input--width "></textarea>
</div>