Есть овверрайд на десктопы и мобилки
.input__cleartype - это крестик очистки. Он должен показываться только тогда когда в инпут что-то введено. Это состояние задается модификатором .input_fill. Проставляем этот класс - крестик появляется. Убирает - исчезает.
Тут же замес с кликом по крестику. Если ничего не предпринять, то по клику на этот клеартайп будет пропадать фокус с инпута. Решаю это сбросом event.preventDefault() по mousedown. Смотри набросок в temp.js
Тут сам тег input заменяем на textarea. Не выводим клеартайп.
Дефолтная высота расчитана на 3 строки.
Больше/меньше строк - это +20px и -20px.
Скроллбар не кастомизируется. Это будет происходить в десктопном оверрайде только.
Ресайзим автоматически в зависимости от количества введенного текста. Предлагаю плагинчик Expanding Textareas. Подключаем его, матчимся на .input_resize_auto. В принципе у нас могут появиться поля .input_resize_manual где мы пользователям разрешим ресайзить в ручную. По этому такие вот модификаторы.
Дефолтная высота у textarea проставлена в CSS в расчете на три строки. Здесь она тоже работает. Более того работает max-height так же проставленный в CSS на шесть строк. Плагин будет слушаться этого свойства.
В принципе, тут можно было не задавать высоты в CSS, а обойтись атрибутом rows="", с ним было бы более гибко, но вот другой плагин, который мы будем использовать для кастомизации скроллбара не уважает этот атрибут. Но если мы от него откажемя, то можно вернуться к rows="".