СSS Свойство resize
Пример
Изменить высоту и ширину элемента <div>:
div {
resize: both;
overflow: auto;
}
Редактор кода »
Определение и использование
Свойство resize определяет, если (и как) элемент может быть изменен пользователем.
Примечание: Свойство resize не применяется для встроенных элементов или блока элементов, где overflow="visible". Итак, убедитесь, что переполнение имеет значение, "scroll", "auto", или "hidden".
| Значение по умолчанию: | none |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет Прочитайте о animatable |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.resize="both" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, за которыми следует -moz-, указывают первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| resize | 4.0 | Не поддерживаемый | 5.0 4.0 -moz- |
4.0 | 15.0 |
CSS Синтаксис
resize: none|both|horizontal|vertical|initial|inherit;
Значение свойств
| Значение | Описание | Воспроизвести |
|---|---|---|
| none | Значение по умолчанию. Пользователь не может изменить размер элемента | Воспроизвести » |
| both | Пользователь может изменять как высоту, так и ширину элемента | Воспроизвести » |
| horizontal | Пользователь может изменить ширину элемента | Воспроизвести » |
| vertical | Пользователь может изменить высоту элемента | Воспроизвести » |
| initial | Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитайте о inherit |
Примеры
Пример
Пусть пользователь изменит размер только высоту элемента <div>:
div
{
resize: vertical;
overflow: auto;
}
Редактор кода »
Пример
Пусть пользователь изменит размер только ширину элемента <div>:
div
{
resize: horizontal;
overflow: auto;
}
Редактор кода »
Пример
Во многих браузерах <textarea> можно изменять размер по умолчанию. Здесь мы использовали свойство resize, чтобы отключить изменение размера:
textarea {
resize: none;
}
Редактор кода »
Связанные страницы
CSS Учебник: CSS Пользовательский интерфейс
HTML DOM Справочник: Свойство resize
