Свойство CSS `field-sizing`

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

Это свойство обычно используют для стилизации текстовых элементов <input> и <textarea>, чтобы их размер соответствовал содержимому и увеличивался при вводе дополнительного текста.

Синтаксис

/* Keyword values */
field-sizing: content;
field-sizing: fixed;

/* Global values */
field-sizing: inherit;
field-sizing: initial;
field-sizing: revert;
field-sizing: revert-layer;
field-sizing: unset;

Значения

Это свойство задаётся одним из следующих ключевых слов:

content

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

fixed

Задаёт фиксированный размер элемента. Это значение по умолчанию.

Описание

field-sizing: content переопределяет предпочтительный размер элементов формы, заданный по умолчанию. Эта настройка позволяет настроить текстовые поля так, чтобы их размер соответствовал содержимому и увеличивался при вводе дополнительного текста. Они перестают увеличиваться, достигнув максимального размера (определяемого размером содержащего элемента или заданного с помощью CSS); после этого для просмотра всего содержимого требуется прокрутка.

Элементы, на которые влияет field-sizing: content

В частности, field-sizing для content влияет на следующие элементы:

• Типы полей формы, принимающие текст непосредственно от пользователей. К ним относятся типы email, number, password, search, tel, text и url.
  • Если для элемента управления не задана минимальная ширина, его ширина будет равна ширине текстового курсора.
  • Элементы управления с атрибутом placeholder отображаются достаточно большими, чтобы в них помещался текст-заполнитель.
  • Атрибут size изменяет предпочтительный размер таких элементов <input> по умолчанию. Поэтому size не влияет на элементы <input>, для которых задан field-sizing: content.
• Поля file. Ввод текста непосредственно невозможен, однако отображаемое имя файла меняется, когда пользователь выбирает новый файл для загрузки. Если задано field-sizing: content, размер элемента управления будет соответствовать имени файла.
• Элементы управления <textarea>. Стоит отметить, что элементы <textarea> с заданным field-sizing: content ведут себя почти так же, как однострочные текстовые элементы управления, но есть следующие особенности:
  • Если элементы <textarea> не могут увеличиваться из-за ограничения ширины, их высота начнёт увеличиваться, чтобы отображать дополнительные строки содержимого. При достижении ограничения высоты появится полоса прокрутки, позволяющая просматривать всё содержимое.
  • Атрибуты rows и cols изменяют предпочтительный размер элемента <textarea> по умолчанию. Поэтому rows/cols не влияют на элементы <textarea>, для которых задан field-sizing: content.
• Элементы управления <select>. При заданном field-sizing: content они ведут себя несколько иначе, чем можно было бы ожидать. Эффект зависит от типа элемента управления <select>:
  • Обычные раскрывающиеся списки меняют ширину так, чтобы соответствовать отображаемому значению выбранного пункта. (По умолчанию раскрывающийся список имеет ширину, достаточную для отображения самого длинного значения.)
  • Списки (элементы <select> с атрибутом multiple или size) будут достаточно большими, чтобы отображать все варианты без прокрутки. (По умолчанию для просмотра всех значений в раскрывающемся списке требуется прокрутка.)
  • Атрибут size почти не влияет на элементы <select> с заданным field-sizing: content. В таких случаях браузер проверяет, равно ли size значению 1, чтобы определить, должен ли элемент управления <select> отображаться как раскрывающийся список или как список. Однако в списке всегда будут отображаться все варианты, даже если size меньше их количества.

Взаимодействие field-sizing с другими настройками размера

Гибкость изменения размера элементов управления формы, обеспечиваемая свойством field-sizing: content, может быть переопределена другими свойствами CSS для задания размера. При использовании field-sizing: content избегайте задания фиксированных значений width и height, поскольку они снова установят для элемента управления фиксированный размер. Однако использование таких свойств, как min-width и max-width, вместе с field-sizing: content вполне эффективно: они позволяют элементу управления увеличиваться и уменьшаться в зависимости от введённого текста, а также предотвращают его чрезмерное увеличение или уменьшение.

Атрибут maxlength останавливает увеличение размера элемента управления при достижении максимального количества символов.

Формальное определение

Формальный синтаксис

field-sizing = 
  content |
  fixed

Примеры

Увеличение и уменьшение текстовых полей

В этом примере показано влияние field-sizing: content на однострочные и многострочные текстовые поля. По мере добавления и удаления текста размеры полей меняются в соответствии с содержимым, пока не будет достигнут нижний или верхний предел размера.

HTML

HTML-код этого примера содержит четыре поля формы, каждое из которых связано с элементом <label>: три элемента <input> типов text, email и tel, а также элемент <textarea>.

<div>
  <label for="name">Enter name:</label>
  <input type="text" id="name" />
</div>
<div>
  <label for="email">Enter email:</label>
  <input type="email" id="email" placeholder="e.g. a@b.com" />
</div>
<div>
  <label for="tel">Enter telephone:</label>
  <input type="tel" id="tel" maxlength="15" />
</div>
<div>
  <label for="comment">Enter comment:</label>
  <textarea id="comment">This is a comment.</textarea>
</div>

Обратите внимание на следующие особенности HTML:

• Для первых двух полей не заданы ограничения длины.
• Для третьего поля (типа tel) задан атрибут maxlength, который останавливает увеличение размера поля при достижении ограничения количества символов.
• Элемент <textarea> будет увеличиваться во встроенном направлении, пока не достигнет ограничения min-width (заданного в приведённом ниже коде CSS), а затем начнёт добавлять строки в блочном направлении для размещения последующих символов.
• Для поля email задан текст-заполнитель. Поэтому поле отображается достаточно большим, чтобы в нём помещался весь текст-заполнитель. Когда поле получает фокус и пользователь начинает вводить текст, его размер меняется до значения min-width. Поле text, для которого не задан текст-заполнитель, изначально отображается размером min-width.

CSS

В CSS для трёх полей формы задаётся field-sizing: content, а также min-width и max-width, ограничивающие размер полей. Стоит ещё раз отметить: если бы для полей не была задана минимальная ширина, они отображались бы шириной всего лишь с текстовый курсор.

Также мы добавляем элементам <label> базовое оформление, чтобы они аккуратно располагались рядом с полями.

body {
  box-sizing: border-box;
  padding: 20px;
}

div {
  margin-bottom: 20px;
  display: flex;
}

input,
textarea {
  field-sizing: content;
  min-width: 50px;
  max-width: 350px;
}

label {
  width: 150px;
  margin-right: 20px;
  text-align: right;
}

Результат

Попробуйте вводить и удалять текст в полях ниже, чтобы изучить влияние field-sizing: content в сочетании с другими свойствами размера.

Управление отображением элемента <select>

В этом примере показано влияние field-sizing: content на элементы <select> — как на раскрывающиеся меню, так и на многострочные списки.

HTML

HTML-код содержит два набора элементов <select>: для одного задано field-sizing: content, а для другого — нет. Так можно увидеть разницу (хотя эффект может быть менее заметным, чем для текстовых полей). Каждый набор включает раскрывающееся меню и многострочный список (для которого задан атрибут multiple).

<div class="field-sizing">
  <h2>With <code>field-sizing: content</code></h2>
  <select>
    <option>Bananas</option>
    <option>Strawberries</option>
    <option selected>Apples</option>
    <option>Raspberries</option>
    <option>Pomegranate</option>
  </select>
  <select multiple>
    <option>Bananas</option>
    <option>Strawberries</option>
    <option>Apples</option>
    <option>Raspberries</option>
    <option>Pomegranate</option>
  </select>
</div>
<div>
  <h2>Without <code>field-sizing: content</code></h2>
  <select>
    <option>Bananas</option>
    <option>Strawberries</option>
    <option selected>Apples</option>
    <option>Raspberries</option>
    <option>Pomegranate</option>
  </select>
  <select multiple>
    <option>Bananas</option>
    <option>Strawberries</option>
    <option>Apples</option>
    <option>Raspberries</option>
    <option>Pomegranate</option>
  </select>
</div>

CSS

В CSS свойство field-sizing: content задано только для первого набора элементов <select>.

body {
  box-sizing: border-box;
  display: flex;
  gap: 20px;
  font-family: sans-serif;
}

h2 {
  margin-top: 0;
  font-size: 1rem;
  text-align: center;
  flex: 1 0 100%;
}

div {
  margin-bottom: 20px;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  flex-flow: row wrap;
}

.field-sizing select {
  field-sizing: content;
}

Результат

Обратите внимание на следующие эффекты field-sizing: content:

• Размер раскрывающегося меню всегда соответствует размеру отображаемого варианта и меняется при выборе другого варианта. Без field-sizing: content ширина меню фиксирована и соответствует самому длинному варианту.
• В списке с множественным выбором одновременно отображаются все варианты. Без field-sizing: content пользователю приходится прокручивать список, чтобы просмотреть все варианты.

Спецификации

Совместимость с браузерами

См. также

• <input>
• <select>
• <textarea>