resize
Может ли пользователь менять размер элемента, перетаскивая его угол.
Синтаксис
resize: vertical;Значения
| Параметр | Тип | Описание |
|---|---|---|
| none | keyword | Размер менять нельзя. |
| both | keyword | Ширину и высоту (по умолчанию у `<textarea>`). |
| horizontal | vertical | keyword | Только в одном направлении. |
Примеры
Поле, которое растёт только в высоту, и блок с изменяемым размером:
<textarea style="resize: vertical; width: 220px;">Only the height can be changed</textarea>
<div style="resize: both; overflow: auto; width: 160px; height: 60px; border: 1px solid gray;">Drag the corner of this block</div>Примечания
У элементов, кроме <textarea>, resize работает только при overflow, отличном от visible. resize: vertical у полей ввода не даёт пользователю сломать вёрстку, растянув их слишком широко.
См. также
- overflow — Что делать с содержимым, которое не помещается в элемент.
- <textarea> — Многострочное текстовое поле.
Вопросы и ответы по теме
В учебнике
- Оформление форм — Как оформить поля и кнопки — отступы и рамки, состояние фокуса, подсказка, выключенные и ошибочные поля, accent-color и свои флажки через appearance: none.