Запретить изменение размеров - «Формы» » Новости мира Интернет
«Escape from Mars»: вышел первый трейлер научно-фантастического шутера Cor3 от создателей Escape from Tarkov - «Новости сети»
«Escape from Mars»: вышел первый трейлер научно-фантастического шутера Cor3 от создателей Escape from Tarkov - «Новости сети»
YouTube прикрыл лазейку: фоновое воспроизведение на Android без Premium больше не работает - «Новости сети»
YouTube прикрыл лазейку: фоновое воспроизведение на Android без Premium больше не работает - «Новости сети»
«Живее всех живых»: датамайнер рассказал, что происходит с Half-Life 3 - «Новости сети»
«Живее всех живых»: датамайнер рассказал, что происходит с Half-Life 3 - «Новости сети»
Microsoft пустила в массы новое меню «Пуск» для Windows 11 и объяснила, почему снова переработала его - «Новости сети»
Microsoft пустила в массы новое меню «Пуск» для Windows 11 и объяснила, почему снова переработала его - «Новости сети»
Apple отказалась внедрять Claude в Siri из-за ненасытности Anthropic - «Новости сети»
Apple отказалась внедрять Claude в Siri из-за ненасытности Anthropic - «Новости сети»
Хардкорный шутер Road to Vostok о выживании на границе Финляндии и России скоро ворвётся в ранний доступ Steam — дата выхода и новый трейлер - «Новости сети»
Хардкорный шутер Road to Vostok о выживании на границе Финляндии и России скоро ворвётся в ранний доступ Steam — дата выхода и новый трейлер - «Новости сети»
Google переполошила геймдев: выход ИИ-генератора миров Project Genie уронил акции крупнейших разработчиков - «Новости сети»
Google переполошила геймдев: выход ИИ-генератора миров Project Genie уронил акции крупнейших разработчиков - «Новости сети»
Уже три компании из Китая пробились в топ-20 крупнейших поставщиков оборудования для выпуска чипов - «Новости сети»
Уже три компании из Китая пробились в топ-20 крупнейших поставщиков оборудования для выпуска чипов - «Новости сети»
Качественные изображения Samsung Galaxy S26 и S26+ слили в Сеть до анонса - «Новости сети»
Качественные изображения Samsung Galaxy S26 и S26+ слили в Сеть до анонса - «Новости сети»
Финны начали варить пиво «на песке» — местная пивоварня установила песочный теплоаккумулятор - «Новости сети»
Финны начали варить пиво «на песке» — местная пивоварня установила песочный теплоаккумулятор - «Новости сети»
Новости мира Интернет » Самоучитель CSS » Формы » Запретить изменение размеров - «Формы»
Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 12.10+ 5.0+ 4.0+ 1.0+

Задача

Сделать, чтобы размеры текстового поля созданного через тег <textarea> не изменялись при помощи мыши.

Решение

В современных браузерах Firefox, Safari и Chrome в правом нижнем углу текстового поля есть небольшой уголок (рис. 1) с помощью которого мышью можно изменить размеры поля.

Рис. 1. Вид текстового поля в браузере Chrome

Вид уголка различается, но его функции остаются одинаковыми, если щёлкнуть мышью и потянуть за уголок, то можно изменить размеры поля. Чтобы запретить эту возможность, следует для селектора textarea задать свойство resize со значением none (пример.;1).

Пример 1. Использование resize

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Размеры текстового поля</title>
  <style>
   textarea {
    width: 90%; /* Ширина поля в процентах */
    height: 200px; /* Высота поля в пикселах */
    resize: none; /* Запрещаем изменять размер */
    
  </style>
 </head>
 <body>
  <form>
   <textarea></textarea>
  </form>
 </body>
</html>

Internet Explorer Chrome Opera Safari Firefox Android iOS 4.0 12.10 5.0 4.0 1.0 Задача Сделать, чтобы размеры текстового поля созданного через тег не изменялись при помощи мыши. Решение В современных браузерах Firefox, Safari и Chrome в правом нижнем углу текстового поля есть небольшой уголок (рис. 1) с помощью которого мышью можно изменить размеры поля. Рис. 1. Вид текстового поля в браузере Chrome Вид уголка различается, но его функции остаются одинаковыми, если щёлкнуть мышью и потянуть за уголок, то можно изменить размеры поля. Чтобы запретить эту возможность, следует для селектора textarea задать свойство resize со значением none (пример.;1). Пример 1. Использование resize HTML5 CSS3 IE Cr Op Sa Fx

Цитирование статьи, картинки - фото скриншот - Rambler News Service.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

Смотрите также

А что там на главной? )))



Комментарии )))