Как установить текстовую высоту для тега ввода?

Question

Мне нужно, чтобы текст был введен на всю ширину, а затем перенесен на новую строку.Количество строк не ограничено.И чтобы текст начинался с начала тега ввода, а не с середины.

Я пытался установить высоту, но изменяется только высота ввода (не высота текстового поля).

---

HTML

<input type="text" id="text" name="text" placeholder="Message*" class="in__message">

---

CSS

input{
    width: 100%;
    border: 1px solid rgba(194, 191, 203, 0.7);
    background: rgba(0, 0,0, 0);
    color: rgba(194, 191, 203, 0.8);
    margin-bottom: 27px;
    padding: 20px;
    font-weight: 400;
    font-size: 12px;
    height: 205px;
}

---

В общем, вынужно поместить текст сверху и сделать бесконечную высоту и перенести ее на другую строку при заполнении ширины блока.

Answer 1

Попробуйте использовать <textarea> вместо <input> элемента:

textarea{
    width: 100%;
    border: 1px solid rgba(194, 191, 203, 0.7);
    background: rgba(0, 0,0, 0);
    color: rgba(194, 191, 203, 0.8);
    margin-bottom: 27px;
    padding: 20px;
    font-weight: 400;
    font-size: 12px;
    height: 205px;
}

<textarea id="text" name="text" placeholder="Message*" class="in__message"></textarea>

Answer 2

<input type="text">

всегда одна строка. Попробуйте вместо этого:

<input type="textarea">