Запретить изменение размеров - «Формы» » Новости мира Интернет
WhatsApp переизобрёл голосовую почту — и получил другие нововведения с последним крупным обновлением - «Новости сети»
WhatsApp переизобрёл голосовую почту — и получил другие нововведения с последним крупным обновлением - «Новости сети»
«Рождество наступило раньше времени»: создатели второго сезона сериала «Фоллаут» обрадовали фанатов переносом премьеры - «Новости сети»
«Рождество наступило раньше времени»: создатели второго сезона сериала «Фоллаут» обрадовали фанатов переносом премьеры - «Новости сети»
Продажи Hollow Knight: Silksong превысили 7 миллионов копий — анонсировано большое бесплатное дополнение Sea of Sorrow - «Новости сети»
Продажи Hollow Knight: Silksong превысили 7 миллионов копий — анонсировано большое бесплатное дополнение Sea of Sorrow - «Новости сети»
Британия предлагает встроить цензуру прямо в iOS и Android — доступ к обнажёнке только после проверки возраста - «Новости сети»
Британия предлагает встроить цензуру прямо в iOS и Android — доступ к обнажёнке только после проверки возраста - «Новости сети»
$3 млрд за лояльность: как Tesla превратила совет директоров в группу поддержки Илона Маска - «Новости сети»
$3 млрд за лояльность: как Tesla превратила совет директоров в группу поддержки Илона Маска - «Новости сети»
Escape from Tarkov вошла в Зал Славы видеоигровой индустрии России - «Новости сети»
Escape from Tarkov вошла в Зал Славы видеоигровой индустрии России - «Новости сети»
В этот день 15 лет назад перестал выходить на связь создатель биткоина Сатоши Накамото - «Новости сети»
В этот день 15 лет назад перестал выходить на связь создатель биткоина Сатоши Накамото - «Новости сети»
Впервые учёные наблюдали настоящую алхимию — солнечный нейтрино превратил изотоп углерода в азот - «Новости сети»
Впервые учёные наблюдали настоящую алхимию — солнечный нейтрино превратил изотоп углерода в азот - «Новости сети»
Замена трёхстворчатого дисплея у Samsung Galaxy Z TriFold обойдётся дороже новенького Galaxy S25 Ultra - «Новости сети»
Замена трёхстворчатого дисплея у Samsung Galaxy Z TriFold обойдётся дороже новенького Galaxy S25 Ultra - «Новости сети»
Netflix нашла в YouTube оправдание для поглощения Warner Bros — антимонопольщики вряд ли купятся - «Новости сети»
Netflix нашла в YouTube оправдание для поглощения Warner Bros — антимонопольщики вряд ли купятся - «Новости сети»
Новости мира Интернет » Самоучитель 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>
Цитирование статьи, картинки - фото скриншот - Rambler News Service.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

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

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

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



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