Перейти к содержанию

resize

Свойство resize указывает, можно ли пользователю изменять размеры текстового поля.

Демо

Интерфейс

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
/* Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* Global values */
resize: inherit;
resize: initial;
resize: revert;
resize: revert-layer;
resize: unset;s

Значения

none

Размеры элемента не изменяются.

both

Можно изменять размеры элемента по горизонтали и вертикали.

horizontal

Можно изменять размеры элемента только по горизонтали.

vertical

Можно изменять размеры элемента только по вертикали.

Примечание

Хотя по умолчанию значение установлено как none, многие браузеры самостоятельно меняют его на both. Если вы не хотите, чтобы размер поля изменялся, задавайте явное значение none, а не оставляйте его по умолчанию.

Значение по-умолчанию: none

Применяется к <textarea> или к любому элементу, у которого свойство overflow отличается от visible

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

Поддержка браузерами

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>resize</title>
        <style>
            textarea {
                resize: both;
            }
        </style>
    </head>
    <body>
        <p>
            Потяните за правый уголок, чтобы изменить размер
            текстового поля.
        </p>
        <p><textarea cols="30" rows="7"></textarea></p>
    </body>
</html>

Комментарии