CSS-свойство field-sizing: автоматическое изменение размера полей ввода

Магия вне Хогвартса: Как CSS field-sizing навсегда решит проблему «резиновых» полей

Признайся, сколько раз ты писал JavaScript-костыли, чтобы обычная textarea растягивалась вслед за текстом? Это классическая задача на собеседованиях и вечная головная боль в реальных проектах. Мы хотим, чтобы интерфейс был живым, но браузеры десятилетиями предлагали нам либо фиксированные коробки со скроллбарами, либо монструозные скрипты для расчета высоты строки. Но на дворе 2026 год, и пришло время выкинуть этот мусор на свалку истории.

Сегодня мы разберем свойство field-sizing. Это тот самый «киллер-фича», которая делает работу с формами такой же приятной, как утренний кофе без дедлайнов. Оно позволяет элементам ввода автоматически подстраивать свой размер под контент без единой строчки JS.

Как мы страдали раньше

Вспомни эти темные времена. Чтобы сделать авторесайз, мы использовали один из трех сомнительных путей:

• JS-слушатели: Вешали событие input, считали scrollHeight и вручную меняли style.height. Это лагало, дергалось и ломалось, если у элемента были разные box-sizing или паддинги.
• Скрытый «близнец»: Создавали невидимый div с такими же стилями, копировали туда текст и мерили его высоту. Это вообще за гранью добра и зла в плане производительности и чистоты кода.
• Contenteditable: Пытались стилизовать обычный div под поле ввода. Но тут же огребали проблем с доступностью (A11y), фокусом и безопасностью данных.

Особенно больно это смотрелось, когда ты уже освоил нативный CSS Nesting и твой код выглядел чисто, а потом приходилось пачкать его скриптами для банальной высоты текстового поля.

Как делать правильно в 2026 году

Теперь всё, что нам нужно — это свойство field-sizing: content. Оно сообщает браузеру: «Эй, забудь про фиксированные размеры по умолчанию, просто расширяйся настолько, сколько внутри текста».

Это работает не только для textarea, но и для обычных input (они будут расти в ширину) и даже для select. Больше никаких обрезанных названий городов или имен в выпадающих списках. В сочетании с продвинутым использованием псевдокласса :has(), ты можешь творить настоящие чудеса, меняя стили всей формы в зависимости от того, насколько разрослось поле ввода.

Готовый сниппет кода

Смотри, насколько это лаконично. Просто добавь этот класс своим инпутам, и магия сработает сама собой.

/* Делаем все текстовые поля адаптивными */
.auto-resize-field {
  field-sizing: content;
  
  /* Обязательно ограничиваем, чтобы поле не улетело в бесконечность */
  min-height: 3em;
  max-height: 20vh;
  
  /* Для обычных input ограничиваем ширину */
  min-width: 100px;
  max-width: 100%;
  
  /* Базовая косметика */
  padding: 12px;
  border: 2px solid #ccc;
  border-radius: 8px;
  resize: none; /* Отключаем ручной ресайз, он больше не нужен */
}

Частая ошибка новичков

Самый частый косяк, который я вижу у мидлов при внедрении field-sizing — это отсутствие ограничителей. Если ты просто бахнешь field-sizing: content и забудешь про max-height или max-width, пользователь может случайно (или специально) вставить в поле текст всей «Войны и мира».

Результат? Твоя верстка взорвется, футер улетит в стратосферу, а пользователь будет в ярости. Запомни: автоматический размер всегда должен идти под ручку с max-height и overflow: auto. Когда поле достигнет предела, браузер просто вернет старый добрый скролл внутри элемента. Это и есть профессиональный подход — давать гибкость, но держать её под контролем.

🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!