Изменение размера поля CSS

Одна строка кода для автоматического изменения размера элементов с редактируемым содержимым.

Adam Argyle

Без field-sizing для создания поля ввода хорошего размера приходилось либо угадывать средний размер текстового поля ввода, либо использовать JavaScript для подсчета символов и увеличения высоты или ширины элемента по мере ввода текста пользователем. Другими словами, это было непросто, и это было подвержено ошибкам при попытке отследить содержимое, которое пользователь ввел в поле ввода.

С field-sizing вам нужна одна строка CSS, чтобы включить изменение размера на основе содержимого. Этот стиль изменения размера на основе содержимого также работает не только для текстовой области!

textarea, select, input {
  field-sizing: content;
}

Быстрые ссылки

Спецификация | Объяснитель

Нравятся короткие видеоролики?

Уэс Бос и Джей выложили в Twitter замечательные видео, в которых рассказывают о том, как field-sizing .

На какие элементы влияет размер поля?

Ниже приведен список элементов <form> , на которые распространяется действие field-sizing , а также краткое описание эффектов, которые оно оказывает на каждый из них.

<textarea>

Ввод сжимается до min-inline-size или до размера заполнителя.

По мере того, как пользователи печатают, ввод увеличивается в направлении строки, пока не достигнет максимального размера строки, после чего текст будет перенесен, а размер блока ввода увеличится, чтобы вместить новую строку.

<select> и <select multiple>

Элемент выбора сжимается, чтобы вместить выбранную опцию.

Выборка с атрибутом multiple увеличивается, чтобы вместить самый широкий вариант и стать такой высоты, которая необходима для вмещения необходимого количества вариантов.

<input type="text"> , <input type="email"> и <input type="number">

Ввод сжимается до min-inline-size или до размера заполнителя.

По мере того, как пользователи печатают, ввод увеличивается в направлении inline-size, пока не достигнет max-inline-size , после чего переполнение обрезает входное значение.

<input type="file">

Ввод сворачивается до кнопки и предварительно заполненного текста имени файла.

После загрузки файла поле ввода становится таким же широким, как кнопка плюс текст имени файла.

Просмотр, тестирование и сравнение результатов

Ниже представлен интерактивный и минимальный пример поведения каждого элемента формы до и после изменения field-sizing .

Присмотримся поближе

При использовании [placeholder] , заполнитель становится содержимым. Это упоминалось ранее, но здесь это указано, так как это важно знать при стилизации формы. Длинный или короткий заполнитель изменит внутренний размер входных данных с помощью field-sizing: content .

Обработка пустых и переполненных стилей

Использование field-sizing означает, что вам придется проделать некоторую дополнительную работу. Ахмад Шадид называет это « защитным CSS », где цель не обязательно в том, чтобы точно описать, как что-то должно себя вести или выглядеть, а скорее защитить его от попадания в нежелательное визуальное состояние. Раньше у входов было довольно много фиксированных размеров, но после применения field-sizing: content входы могут стать слишком маленькими или слишком большими.

Следующие стили являются хорошей отправной точкой. Они помогают элементам не сжиматься в слишком маленькое поле, а также, в случае textarea , не становиться слишком большими.

textarea {
  min-block-size: 3.5rlh;
  min-inline-size: 20ch;
  max-inline-size: 50ch;
}

select {
  min-inline-size: 5ch;
  min-block-size: 1.5lh;
}

input {
  min-inline-size: 7ch;
}

Этот CSS использует относительные единицы для размеров. Новая единица lh идеально подходит для размеров блоков, а ch хорошо подходит для инлайн-размеров.

Каково значение размера поля по умолчанию?

Значение по умолчанию для field-sizing — fixed , и оно принимает только два значения: fixed или content .