Изменение размеров textarea и других элементов

В CSS 3 появилось свойство resize, которе указывает, можно ли пользователю изменять размеры текстового поля и других элементов. Возможны значения:

none Запрещено изменять размеры
both Можно изменять размеры
horizontal Только по горизонтали
vertical Только по вертикали
inherit Наследует значение родителя
1

resize: none – запрещает растягивание textarea и убирает уголок ресайза.

textarea {
	resize: none;
	width: 400px;
	height: 150px;
}
CSS

Старый метод:

textarea {
	min-width: 400px;
	max-width: 400px;
	max-height: 150px;
	min-height: 150px;
}
CSS

Результат:

2
textarea {
	resize: horizontal;
	width: 400px;
	height: 150px;
}
CSS

Старый метод:

textarea {
	width: 400px;
	height: 150px;
	max-height: 150px;
	min-height: 150px;
}
CSS

Результат:

3
textarea {
	resize: vertical;
	width: 400px;
	height: 150px;
}
CSS

Старый метод:

textarea {
	width: 400px;
	max-width: 400px;
	min-width: 400px;    
	height: 150px;
}
CSS

Результат:

4

Чтобы сделать возможность растягивать другие элементы, помимо resize: both, нужно ещё добавить display: inline-block и overflow: auto.

<div class="box">...</div>
HTML
.box {
	resize: both;
	display: inline-block;
	overflow: auto;
	min-width: 150px;
	min-height: 150px;
	
	background: url(/bg.jpg) 50% 50% no-repeat;
	background-size: cover;    
}
CSS

Результат:

31.03.2020, обновлено 23.04.2020
22465

Комментарии

, чтобы добавить комментарий.

Другие публикации

Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
43512
+34
Как преобразовать текст из textarea в параграфы HTML
Такой вопрос возникает при вставке текста из формы на сайт (отзывы, комментарии и т.д.) с форматированием элементом p.
7138
+3
Автовысота редактора CKEditor
Сделать так, чтобы редактор растягивался на всю высоту контента можно с помощью плагина Auto Grow для CKEditor 4.
3530
-2
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
60585
+7
Обработка изображений в PHP
Библиотека GD дает возможность работать с изображениями в PHP. Далее представлены примеры как изменить размер, вырезать часть изображения и т.д.
58099
+14
Текст в две колонки
Несколько примеров, как вывести текст в две колонки одинаковой ширины и отступом между ними.
77727
+4