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

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

Adam Argyle

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

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

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

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

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

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

У Уэса Боса и Джей есть в Твиттере отличные видеоролики, знакомящие вас с 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 или до размера заполнителя.

По мере ввода пользователем ввод увеличивается в линейном направлении, пока не достигнет 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 .