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

content

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

fixed

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

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

Конкретно, 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: content, может быть переопределена при использовании других свойств размеров CSS. Избегайте задания фиксированной width и height при использовании field-sizing: content, потому что они повторно зададут фиксированный размер элемента управления. Однако использование таких свойств, как min-width и max-width вместе с field-sizing: content достаточно эффективно, поскольку они позволяют элементу управления увеличиваться и уменьшаться в зависимости от вводимого текста, а также препятствуют тому, чтобы элемент управления стал слишком большим или слишком маленьким.

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

field-sizing = 
  fixed    |
  content  

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

HTML

HTML в этом примере содержит три поля формы, каждое с соответствующим элементом метки: два элемента типа текстового поля и поля для электронной почты и элемент текстовой области.

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

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

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

CSS

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

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

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

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

Результат

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

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

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>.

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

Результат

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

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

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