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

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

Adam Argyle

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

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

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

Browser Support

• 123
• 123
• x
• 26.2

Source

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

Технические характеристики | Пояснение

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

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

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

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

<textarea>

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

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

<select> и <select multiple>

Выпадающий элемент уменьшается, чтобы соответствовать выбранному варианту.

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

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

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

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

<input type="file">

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

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

Наблюдение, тестирование и сравнение результатов.

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

Попробуйте на Codepen

Присмотревшись внимательнее

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

Попробуйте на Codepen

Обработка пустого и переполненного стиля

Использование 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?

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