CSS :: Свойство resize

css-свойство resize (от англ. resize – изменять размер) указывает, как пользователь может изменять размеры элемента. Свойство в основном предназначено для текстовых полей и блочных элементов с текстовым содержимым.

Характеристики

Значение по умолчанию: none.
Применяется: ко всем элементам, кроме строчных элементов, блочных элементов, у которых значение свойства overflow установлено в visible, а также заменяемых элементов вроде <img>, <input type="image">, <embed>, <object>, <iframe>, <canvas>, <audio> или <video>.
Наследуется: нет.
Анимируется: нет.
JavaScript: object.style.resize="value".

Синтаксис

resize: none | both | horizontal | vertical

Значения

none – размеры элемента не доступны для изменения.
both – размеры элемента доступны для изменения как по горизонтали, так и по вертикали.
horizontal – размеры элемента доступны для изменения только по горизонтали.
vertical – размеры элемента доступны для изменения только по вертикали.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-ui-3/#propdef-resize

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/resize

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>

		p{
		width: 300px;
		height: 100px;
		margin: 2em;
		padding: 1em;
		border: solid 1px #FF0000;
		background-color: yellow;
		overflow: hidden;
		}
		
		.p_1{
		resize: none;
		}
		
		.p_2{
		resize: both;
		}
		
		.p_3{
		resize: horizontal;
		}		
		
		.p_4{
		resize: vertical;
		}
		
	</style>
	
</head>
<body>
	 
	<p class="p_1">
		resize: none - размер элемента не изменяется.	
	</p> 
 
	<p  class="p_2">
		resize: both - размер изменяется как по 
		горизонтали, так и по вертикали. 
	</p>
 
	<p  class="p_3">
		resize: horizontal - размер изменяется только 
		по горизонтали.	
	</p>
 
	<p  class="p_4">
		resize: vertical - размер изменяется только 
		по вертикали.	
	</p>
	
</body>
</html>

Пример №1