Css resize: resize | CSS | WebReference

Leave a Comment / Css / By /

resize | CSS | WebReference

  • Содержание
    • Краткая информация
    • Синтаксис
    • Значения
    • Песочница
    • Пример
    • Примечание
    • Спецификация
    • Браузеры

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

Значение по умолчаниюnone
НаследуетсяНет
ПрименяетсяК <textarea> или к любому элементу, у которого свойство overflow отличается от visible
АнимируетсяНет

Синтаксис 

resize: none | both | horizontal | vertical

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).
normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

none
Размеры элемента не изменяются.
both
Можно изменять размеры элемента по горизонтали и вертикали.
horizontal
Можно изменять размеры элемента только по горизонтали.
vertical
Можно изменять размеры элемента только по вертикали.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

none both horizontal vertical

textarea {
  resize: {{ playgroundValue }};
}

Пример

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

Объектная модель

Объект. style.resize

Примечание

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

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

СпецификацияСтатус
CSS Basic User Interface Module Level 3Рекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

412.1045

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

См. также

  • <textarea>
  • Многострочное текстовое поле
  • Многострочный текст

Рецепты

  • Как запретить изменение размеров <textarea>?
  • Как сделать, чтобы в текстовом поле заранее выводился опредёленный текст?

Практика

  • Многострочный текст
  • Размеры <textarea>

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.03.2020

Редакторы: Влад Мержевич

CSS resize

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Полный CSS Справочник Дальше ❯


Пример

Здесь пользователь может изменить размер как высоты, так и ширины элемента <div>:

div {
    resize: both;
    overflow: auto;
}

Подробнее примеры ниже.

Определение и использование

Свойство resize определяет, является ли элемент изменяемым по размерам пользователем.

Примечание: Свойство resize не применяется к встроенным элементам или блокировать элементы, где переполнение = «видимый». Таким образом, убедитесь, что переполнение установлено на «прокрутки», «Авто», или «скрытый».

Значение по умолчанию:none
Inherited:no
Animatable:no. Читайте о animatable
Version:CSS3
Синтаксис JavaScript: object.style.resize=»both»

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

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Номера следуют -МОЗ- укажет первую версию, которая работала с префиксом.

Свойство
resize4. 0Не поддерживается5.0
4.0 -moz-		4.015.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 User Interface

HTML DOM Справочник: resize Свойство

❮ Назад Полный CSS Справочник Дальше ❯

Популярное CSS

css текст
блоки css
css картинки

как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS.ru

Правила и Условия Политика конфиденциальности О нас Контакты

Свойство изменения размера CSS

❮ Назад Полное руководство по CSS Далее ❯


Пример

Здесь пользователь может изменить размер элемента

как по высоте, так и по ширине:

div {
  изменить размер: оба;
  переполнение: авто;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Свойство resize определяет, можно ли (и как) изменить размер элемента с помощью пользователь.

Примечание: Свойство изменить размер не применяется к строчным элементам или блочные элементы, где overflow=»visible». Итак, убедитесь, что для переполнения установлено значение «прокрутка», «авто» или «скрытый».

Значение по умолчанию: нет
Унаследовано: нет
Анимация: нет. Читать о анимированном
Версия: CSS3
Синтаксис JavaScript: объект .style.resize=»оба» Попытайся

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Числа, за которыми следует -moz-, указывают первую версию, которая работала с префиксом.

Собственность
изменить размер 4,0 79,0 5,0
4,0 -моз-		 4,0 15,0

Синтаксис CSS

изменение размера: нет|оба|горизонтальный|вертикальный|начальный|наследовать;

Значения свойств

Значение Описание Демо
нет Значение по умолчанию. Пользователь не может изменить размер элемента Играй »
оба Пользователь может изменять размер как высоты, так и ширины элемента Играй »
горизонтальный Пользователь может изменять ширину элемента Играй »
вертикальный Пользователь может изменять высоту элемента Играй »
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный Играй »
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Дополнительные примеры

Пример

Разрешить пользователю изменять размер только высоты элемента

:

div {
  изменить размер: по вертикали;
  переполнение: авто;
}

Попробуйте сами »

Пример

Разрешить пользователю изменять размер только ширины элемента

:

div {
  изменить размер: по горизонтали;
  переполнение: авто;
}

Попробуйте сами »

Пример

Во многих браузерах размер