CSS изменение размеров textarea
В профессиональной разработке сайтов при верстке форм иногда необходимо менять размеры текстовых полей или других элементов. В данном обзоре приведены примеры как это сделать.
В CSS 3 появилось свойство resize, через которое можно пользователю изменять размеры тега. Resize может иметь такие значения:
- none - Запрещено изменять размеры
- both - Можно изменять размеры
- horizontal - Только по горизонтали
- vertical - Только по вертикали
- inherit - Наследует значение родителя
Запретить растягивание
resize: none – запрещает растягивание textarea и убирает уголок ресайза.
Рабочий пример который запрещает растягивание textarea
Разрешить растягивание только по горизонтали
resize: horizontal – разрешает растягивание textarea по горизонтали.
Рабочий пример который запрещает горизонтальное растягивание textarea
Разрешить растягивание только по вертикали
resize: vertical – разрешает растягивание textarea по вертикали.
Рабочий пример который запрещает вертикальное растягивание textarea
Растягивание тега div
Чтобы сделать возможность растягивать элементы, помимо CSS свойства resize: both, нужно ещё добавить display: inline-block и overflow: auto.
Рабочий пример который запрещает вертикальное растягивание textarea
