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>